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
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.
Top comments (0)