DEV Community

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

Posted on

ES6: Template Strings en JavaScript

#javascript #es6 #webdev #spanish

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)

Read next

raja_yadav profile image

Boost Your Business with Professional Web Development & Cybersecurity Solutions!

Raja Yadav -

intersystemsdev profile image

Database Management Tool

InterSystems Developer -

csituma profile image

5 Vercel Features Developers Absolutely Love

Clara Situma -

orahul1 profile image

Accessibility (a11y) Rules - 3

Rahul Raveendran -