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í.