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)