DEV Community 👩‍💻👨‍💻

Cover image for ES6: Template Strings en JavaScript
Cristian Fernando
Cristian Fernando

Posted on

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`;
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

${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}"
Enter fullscreen mode Exit fullscreen mode

Imprimiendo expresiones

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

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

También pueden usarse para llamar funciones:

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

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."
*/
Enter fullscreen mode Exit fullscreen mode

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."
*/
Enter fullscreen mode Exit fullscreen mode

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?"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

¿Bastante sencillo no crees?
link

Referencias 👌


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.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!