Los Template Literals son una sintaxis especial para definir cadenas de texto en JavaScript, que aporta varias ventajas muy potentes respecto a las tradicionales.
Se introdujeron en ECMAScript 6 (2015) y se definen usando de backticks (`
) (en lugar de comillas simples o dobles).
const saludo = `Hola, mundo`; // Template Literal
Los Template Literals aportan varias funciones muy útiles como,
- Interpolación de variables y expresiones
- Soportar multilínea y texto formateado
Los Template Literals son una sintaxis muy potente. Acostumbraros a usarla porque simplifican mucho el trabajo con textos
Interpolación de expresiones
Una de las características más potentes de los Template Literals es la capacidad de interpolar variables y expresiones directamente dentro de la cadena de texto.
Esto se realiza utilizando la sintaxis ${expresión}
dentro del literal de plantilla. La Template Literal sustituirá por su valor evaluado como String.
const nombre = 'Juan';
const edad = 25;
const mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // "Hola, mi nombre es Juan y tengo 25 años."
Además de variables, los Template Literals permiten incluir cualquier expresión JavaScript dentro de la cadena (operaciones matemáticas, llamadas a funciones, condicionales, etc).
const a = 5;
const b = 10;
const resultado = `La suma de ${a} y ${b} es ${a + b}.`;
console.log(resultado); // "La suma de 5 y 10 es 15."
const esMayor = (edad) => edad >= 18;
const mensaje = `Eres ${esMayor(21) ? 'adulto' : 'menor de edad'}.`;
console.log(mensaje); // "Eres adulto."
Pero tampoco abuséis de poner expresiones larguísimas. Por legibilidad, si no es corto, sacarlo como una variable independiente.
Concatenación de cadenas
Uno de los usos más frecuentes de los Template Literals es simplemente usarlos para concatenar textos (de hecho, todo lo que hacen se podría hacer concatenando texto).
Antes de la introducción de los Template Literals, teníamos que usar concatenación de cadenas (por ejemplo con +
), para incluir variables dentro de textos.
const nombre = 'Pedro';
const edad = 28;
const mensaje = 'Hola, mi nombre es ' + nombre + ' y tengo ' + edad + ' años.';
console.log(mensaje); // "Hola, mi nombre es Pedro y tengo 28 años."
Con los Template Literals quedaría así,
const nombre = 'Pedro';
const edad = 28;
const mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // "Hola, mi nombre es Pedro y tengo 28 años."
Ventajas
- Mayor legibilidad: la sintaxis
${}
permite que el código sea más fácil de leer y entender. - Menos propenso a errores: con los métodos tradicionales de concatenación de cadenas, es fácil cometer errores al olvidar comillas o signos
+
- Mayor flexibilidad: podemos utilizar expresiones dentro de los
${}
directamente. - ¡Se acabo el infierno espacios!: de verdad, era horrible ir mirando los
😆
Cadenas Multilíneas
Los Template Literals permiten definir cadenas de texto que abarcan múltiples líneas, sin necesidad de caracteres de escape especiales.
const mensajeMultilinea = `
<div>
<h1>Encabezado</h1>
<p>Este es un párrafo en una cadena de múltiples líneas.</p>
</div>
`;
Esto es especialmente útil para crear textos largos o estructurados (como HTML o mensajes largos)
Etiquetas de Template Literals (Tagged Templates)
Una característica avanzada de los Template Literals es el uso de funciones etiquetadas, también conocidas como Tagged Templates.
Una función etiquetada permite procesar el contenido del template literal antes de que se cree la cadena final.
function etiqueta(literals, ...valores) {
console.log(literals); // Array de literales
console.log(valores); // Array de valores interpolados
return 'Cadena procesada';
}
const nombre = 'Ana';
const edad = 30;
const mensaje = etiqueta`Hola, mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // "Cadena procesada"
Esto es útil para tareas como la internacionalización, la sanitización de datos y la construcción de cadenas complejas.
function traductor(literals, ...valores) {
// Lógica para traducir y formatear cadenas
return literals[0] + valores.join('') + literals[1];
}
const nombre = 'Carlos';
const mensaje = traductor`Hola ${nombre}, ¿cómo estás?`;
console.log(mensaje); // "Hola Carlos, ¿cómo estás?"