Los template literals (o literales de plantilla) son una forma más flexible y potente de trabajar con cadenas de texto en JavaScript. Se introdujeron en ES6 (ECMAScript 2015) y permiten crear cadenas de texto más complejas y dinámicas que las comillas simples (') o dobles (").

Características de los Template Literals

1. Comillas Invertidas:

   • Los template literals se crean usando comillas invertidas (`) en lugar de comillas simples o dobles.
   • Ejemplo:

     1let saludo = `Hola, mundo!`;

2. Interpolación de Expresiones:

   • Una de las características más poderosas de los template literals es la interpolación de expresiones, que permite insertar variables y expresiones directamente dentro de una cadena usando la sintaxis ${}.

   • Ejemplo:

      
     1let nombre = "Juan";
     2let mensaje = `Hola, ${nombre}!`;
     3console.log(mensaje); // Muestra "Hola, Juan!"
     Salida de Consola!:
     Hola, Juan!

   • Puedes insertar cualquier expresión dentro de ${}:

      
     1let a = 5;
     2let b = 10;
     3let suma = `La suma de ${a} y ${b} es ${a + b}.`;
     4console.log(suma); // Muestra "La suma de 5 y 10 es 15."
     Salida de Consola!:
     La suma de 5 y 10 es 15.

3. Multilínea:

   • Los template literals permiten crear cadenas multilínea sin necesidad de usar caracteres especiales como \n para los saltos de línea.
   • Ejemplo:

      
     1let texto = `Esta es una línea.
     2Y esta es otra línea.`;
     3console.log(texto);
     Salida de Consola!:
     Esta es una línea.
     Y esta es otra línea.

4. Incorporación de Comillas:

   • Con template literals, puedes incluir comillas simples o dobles dentro de la cadena sin necesidad de escaparlas.
   • Ejemplo:

      
     1let frase = `Ella dijo: "Hola, ¿cómo estás?"`;
     2console.log(frase); // Muestra Ella dijo: "Hola, ¿cómo estás?"
     Salida de Consola!:
     Ella dijo: "Hola, ¿cómo estás?"

5. Funciones de Plantilla (Tagged Templates):

   • Puedes usar funciones especiales llamadas tag functions para procesar un template literal antes de convertirlo en una cadena final. Aunque es una característica avanzada, es útil en situaciones como la internacionalización.
   • Ejemplo básico:

      
     1function etiqueta(literals, ...values) {
     2  return literals[0] + values[0] + literals[1] + values[1];
     3}
     4
     5let nombre="Juan";
     6let a = 5;
     7let b = 2;
     8let mensaje = etiqueta`Hola, ${nombre}. Tienes ${a + b} puntos.`;
     9console.log(mensaje); // Muestra "Hola, Juan. Tienes 15 puntos."
     Salida de Consola!:
     Hola, Juan. Tienes 7

Resumen

• Template literals son una forma más potente de trabajar con cadenas de texto en JavaScript.
• Se crean con comillas invertidas ` y permiten:
  • Interpolación de expresiones: Insertar variables y expresiones directamente en la cadena usando ${}.
  • Cadenas multilínea: Escribir cadenas de varias líneas sin necesidad de caracteres especiales.
  • Incorporación de comillas: Incluir comillas simples o dobles sin escaparlas.
  • Tagged templates: Usar funciones para procesar las cadenas antes de que se conviertan en texto final.

Los template literals hacen que trabajar con cadenas de texto sea más fácil y flexible, especialmente cuando necesitas construir cadenas dinámicas o multilínea.