Literales de plantilla: resucitando la reutilización

Los literales de plantilla en ES6 a menudo se promocionan como poderosas herramientas de manipulación de texto, pero persiste una pregunta persistente: ¿realmente se pueden reutilizar?

Expectativas incumplibles

A primera vista, los literales de plantilla parecen prometer sustituciones dinámicas solo en el momento de la declaración. Esto plantea la pregunta: ¿qué es una plantilla que permanece estática?

Rompiendo el ciclo

Contrariamente a la creencia popular, los literales de plantilla se pueden revitalizar con sustituciones en tiempo de ejecución utilizando la Función constructor como intermediario:

const template = "Hello ${this.name}!";
const variables = {
  name: "world"
};
function fillTemplate(str, data) {
  return new Function("return `"   str   "`;").call(data);
}
console.log(fillTemplate(template, variables)); // Output: Hello world!

Anatomía de una plantilla reutilizable

Esta técnica permite lo siguiente:

• Tiempo de ejecución interpolación: Las variables se completan dinámicamente, como en los motores de plantillas tradicionales.
• Fragmentación: Las plantillas se pueden almacenar en archivos separados u obtenerse dinámicamente.
• Creación dinámica: Las plantillas se pueden construir y evaluar sobre la marcha.

Abordar las advertencias

Si bien este método ofrece una funcionalidad resucitada, existen algunas advertencias:

• JavaScript limitado: La lógica de JavaScript en línea no es posible debido a la interpolación tardía.
• Etiquetas de plantilla: Las etiquetas de plantilla se vuelven desafiantes implementar.

A pesar de estas limitaciones, está claro que con un poco de ingenio, los literales de plantilla pueden trascender sus límites convencionales y volverse verdaderamente reutilizables.