logo ECMAScript

Tratando con Strings y Templates Literales.

Declaración de Variables

Tratando con Strings. Las variables en ES6 se declaran del mismo modo que en JavaScript. Pueden utilizarse indistintamente comillas dobles o simples en su declaración. Veamos un ejemplo.

var nombre = "Pepe";
var apellidos = 'Sanchez';

Concatenar Variables y Textos

Para concatenar variables con el texto utilizaremos el + o las comillas. Veamos un ejemplo:

let nombre = "Manolo";
Let apellidos = "Lopez";

console.log ("Tu nombre completo es: " + nombre + " " + apellidos );
console.log ("Tu nombre completo es: " , nombre , " " , apellidos );

El resultado con + : Tu nombre completo es: Manolo Lopez

El resultado con , : Tu nombre completo es: Manolo Lopez

Por tanto, de esta forma podremos concatenar variables con textos.

Template Literals

Un buena forma de utilizar las variables para evitar tener que concatenar mediante + o mediante coma, es utilizando los templates literales.

Vemos un ejemplo para que quedé más claro.

let nombre = "Manolo";
Let apellidos = "Lopez";

console.log (`Tu nombre completo es: ${nombre} ${apellidos}`);

Como resultado: Tu nombre completo es: Manolo Lopez

Como podemos ver en este caso, podremos utilizar directamente la variable sin tener que concatenar mediante + o coma, y evitando a su vez tener que intercalar comillas vacías.

Por tanto, para poder realizarlo deberemos utilizar comillas simples hacia la derecha. En mi teclado la encuentro en el mismo lugar que el signo del sombrerillo ^.

Todo lo que pongamos dentro de ${} será interpretado como JavaScript puro, por tanto, dentro podremos poner código directamente o llamar a una función. Por ejemplo.

function nombreCoche {
return "SEAT Leon";
}

console.log ( ` Coche ${nombreCoche} tiene ${5 + 2} años `);

El resultado: Coche SEAT Leon tiene 7 años

Repitiendo Strings. Mutando Strings

Esta nueva característica de ES6 sirve para duplicar cadenas String. Su modo de utilización es muy sencilla. Por ejemplo.

Con una variable explicita

var objeto  ="Reloj"

console.log ( objeto.repeat(3) );

Como resultado tenemos: RelojRelojReloj

Con repeat() podremos indicarle el numero de veces que deseamos que la cadena de texto se repita. Si se deja a 0 no se repite ninguna vez. En el ejemplo le hemos indicado que debía repetir el String 3 veces.

También puede realizarse declarando una variable explicita directamente.

Con variable implícita o anónima

 
console.log ( "Arbol".repeat(2) );

El resultado sería: AlbolAlbor

Valores RAW

En las cadenas de texto podemos añadir caracteres especiales que nos permiten realizar alguna función, por ejemplo un salto de linea.

var texto = "Mi caballo salta \n y trota";

El resultado sería:

Mi caballo salta

y trota

Como ven, al indicarle “\n” le estamos indicando que debe realizar un salto de linea. Esto que puede ser ventajoso se puede convertir en un inconveniente a la hora de mostrar algunos textos, por ejemplo.

var mensaje = "Deposito de cuentas\\ 23";
console.log ( mensaje );
 

El resultado es:

Deposito de cuentas\ 23

Como pueden ver, el interprete a anulado una de las barras “\”. Para evitar esto, deberemos de seguir utilizando los templates literals. Veamos un ejemplo.

miMensaje = string.raw`Deposito de cuentas\\ 23`;

console.log ( miMensaje ); 

En resultado sería:

Deposito de cuentas\\ 23

Como puede ver, en esta ocasión lo ha imprimido tal cual se encuentra el String, sin que el interprete haga ningún cambio. Esta es una de las características de los templates literal que nos servirán para añadir texto de forma que no interfiera con el interprete de JavaScript.

Si no ha visto el artículo anterior sobre cadenas de texto, le recomiendo que le eche un vistazo haciendo clic aquí.

0 Comentarios

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

CONTACTARME

Ahora mismo no estoy por aquí. Sí desea ponerse en contacto conmigo puede rellenar este formulario y me pondré en contacto contigo lo antes posible.

Enviando

Copyright © 2017 - 2022. Danny Pid. Todos los Derechos Reservados

POLÍTICA DE PRIVACIDAD - AVISO LEGAL - POLÍTICA DE COOKIES

Inicia Sesión con tu Usuario y Contraseña

¿Olvidó sus datos?