Template Literals en JavaScript

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

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."

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."

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>
`;

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?"