Tagged template literals convierten las plantillas de JavaScript en un juego de palabras
Un ingenioso ejemplo muestra cómo los literales etiquetados pueden emular la sintaxis {{ }} de los sistemas de plantillas, creando un doble parseo similar a un pun.
En un artículo publicado en shukla.io, el autor propone una variante de los tagged template literals de JavaScript que reproduce la apariencia de los habituales marcadores {{ }} de los lenguajes de plantillas. La idea parte de que, dentro de una plantilla etiquetada, los valores interpolados ${{ url }} se forman combinando la interpolación de JavaScript ${…} con el atajo de objeto { url }, que equivale a { url: url }. El resultado es una cadena que, al observarse, parece usar la sintaxis {{ url }} típica de Mustache, Handlebars o Django.
const userPrompt = prompt`
Por favor revisa mi código.
- Enlace al PR: ${{ url }}
- Notas extra: ${{ notes }}
- Marca de tiempo: ${{ time }}
`;
Al ejecutarse, la función prompt recibe dos argumentos: los fragmentos de texto literal y los objetos { url }, { notes }, { time }. Con esa información puede generar una cadena que luego será consumida por la herramienta de observabilidad Helicone, que analiza los prompts enviados a modelos de IA.
El autor compara este truco con los juegos de palabras de Shakespeare: una misma secuencia de caracteres tiene dos lecturas distintas, una literal y otra simbólica. En el mundo de la programación, el “pun” ocurre cuando el motor de JavaScript interpreta ${{ url }} como una interpolación que inserta un objeto, mientras que el ojo humano lo percibe como la típica plantilla {{ url }}.
Este enfoque no es meramente estético. Al reutilizar la sintaxis familiar de los sistemas de plantillas, se reduce la fricción para los desarrolladores que ya trabajan con Mustache, Jinja2 o Django. Además, al centralizar la lógica de transformación en una función de etiqueta, se mantiene la separación entre la definición del mensaje y su procesamiento, facilitando pruebas y auditorías.
El proyecto que introdujo esta idea surgió en 2024 dentro de Helicone, y el código quedó oficializado mediante dos pull requests en el repositorio de la compañía. El autor agradece a Justin, que revisó y fusionó la contribución.
¿Por qué importa?
Los tagged template literals ya son una herramienta poderosa para crear DSL internos en JavaScript. Esta variante muestra que pueden servir también para crear una capa de compatibilidad visual con otras tecnologías de plantillas, lo que simplifica la integración de pipelines de IA que consumen prompts estructurados. En entornos donde se combina código, documentación y generación automática de texto, aprovechar este doble parseo puede ahorrar tiempo y evitar errores de formato.
Queda pendiente ver si la comunidad adoptará la convención y si otras bibliotecas de observabilidad o de generación de prompts incorporarán tags similares. Mientras tanto, el truco está disponible en el repositorio de Helicone para quien quiera experimentar.
