ES6: Template Strings en JavaScript

Los Template Strings o Template Literals es una característica bastante sobresaliente y novedosa que incorpora la versión ES6 de JavaScript permitiendo una manipulación de cadenas de texto mas pulcra y legible.

¿Qué podemos hacer con un Template String?

• Interpolación de cadenas de texto.
• Escritura de código multilínea.

Sintaxis

let texto = `Esto es un Template Literal`;

Basta encapsular los strings entre comillas simples invertidas (alt+96)

Interpolación de cadenas de texto

La concatenación clásica de caracteres se hace de la siguiente manera:

let nombre = "Roxana";
let apellido = "Rodriguez";
console.log("El nombre completo es: " + nombre + " " + apellido)
//salida: "El nombre completo es: Roxana Rodriguez"

Ahora con los Template Strings podríamos hacer lo siguiente:

let nombre = "Roxana";
let apellido = "Rodriguez";
console.log(`El nombre completo es: ${nombre} ${apellido}`)
//salida: "El nombre completo es: Roxana Rodriguez"

${expresion} permite imprimir expresiones dentro de las llaves (siempre y cuando se use Template Literals)

Si en el último ejemplo uso comillas simples o dobles tendríamos el siguiente resultado:

let nombre = "Roxana";
let apellido = "Rodriguez";
console.log('El nombre completo es: ${nombre} ${apellido}')
//salida "El nombre completo es: ${nombre} ${apellido}"

Imprimiendo expresiones

Es posible imprimir cualquier tipo de expresión dentro de ${}. Por ejemplo:

console.log(`${10+10}`);
//salida: "20"

También pueden usarse para llamar funciones:

let saludo = (nombre) => `Hola ${nombre}`;
console.log(`${saludo("Ruben")}`)
//salida: "Hola Ruben"

En la línea 1 se usa una "Fat Arrow Function" (veremos estas funciones en post posteriores)

Strings multilínea

Por ejemplo, si queremos imprimir un texto en varias líneas usaríamos \n\ :

let frase = "Las palabras nunca alcanzan \n\cuando lo que hay que decir \n\desborda el alma.";
console.log(frase);
/* salida:
"Las palabras nunca alcanzan 
cuando lo que hay que decir 
desborda el alma."
*/

Usando Template Strings obtendríamos el mismo resultado de la siguiente manera:

let frase = `
Las palabras nunca alcanzan
cuando lo que hay que decir
desborda el alma
`;
console.log(frase);
/* salida:
"Las palabras nunca alcanzan 
cuando lo que hay que decir 
desborda el alma."
*/

Más usos posibles

Arrays

//Ejemplo 1
let arrayNumeros = [1,2,3,4,5,6,7,8,9,10];
console.log(`La suma de todos los numeros es: ${arrayNumeros.reduce((a,b) => a+b )}`);

//salida: "La suma de todos los numeros es: 55"

//Ejemplo 2
let arraySaludo = ["Pero", "que","pasa","chavales?", "Todo", "bien?", "Todo", "correcto?"];
console.log(`${arraySaludo.join(" ")}`)
//salida: "Pero que pasa chavales? Todo bien? Todo correcto?"

Objetos

let tipo = "gato";
let mascota = [
  {id:1, nombre:"Scott", edad:5, tipo:"perro"},
  {id:2, nombre:"Shorty", edad:8, tipo:"perro"},
  {id:3, nombre:"Fyfy", edad:2, tipo:"gato"}
];

console.log(`Nombre: ${mascota.find(item => item.tipo === tipo).nombre}`);
//salida: "Nombre: Fyfy"

Operador ternario o if reducido

let mascota = {
  id:1, nombre:"Scott", edad:5, tipo:"perro",dueño:true
}

console.log(`${mascota.dueño ? mascota.nombre : "No tiene dueño"}`);
//salida: Scott

¿Bastante sencillo no crees?

GIF

Referencias 👌

• https://www.etnassoft.com/2016/10/05/template-strings-en-es6-estudiando-las-nuevas-plantillas-de-cadena-en-javascript/
• https://desarrolloweb.com/articulos/template-strings-es6.html

---

Conclusiones ✅

• Los template strings son útiles en código multilinea.
• Es una buena práctica realizar interpolaciones con template strings.
• Son bastante sencillos de usar y de comprender.
• Legibilizan el código.