¿Qué son los literales de plantilla etiquetados?

Un literal de plantilla etiquetado implica un literal de plantilla con el prefijo de una función, llamada etiqueta. Esta función puede procesar y manipular el contenido del literal. He aquí un ejemplo sencillo:

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Processed string';
}

const name = 'Alice';
const greeting = tag`Hello, ${name}! How are you?`;
console.log(greeting);

Casos de uso para literales de plantilla etiquetados

1. Internacionalización (i18n)

Los literales de plantilla etiquetados pueden traducir cadenas dinámicamente según la configuración regional del usuario. A continuación se muestra un ejemplo en japonés:

function i18n(strings, ...values) {
    const translations = {
        'Hello, ': 'こんにちは、',
        '! How are you?': '！元気ですか？',
    };

    return strings.reduce((result, str, i) => result   translations[str]   (values[i] || ''), '');
}

const name = 'アリス';
const greeting = i18n`Hello, ${name}! How are you?`;
console.log(greeting); // Output: "こんにちは、アリス！元気ですか？"

2. Formato de cadena personalizado

También pueden implementar una lógica de formato personalizada, como HTML de escape.

function escapeHTML(strings, ...values) {
    const escape = (str) => str.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>');
    return strings.reduce((result, str, i) => result   str   escape(values[i] || ''), '');
}

const userInput = '';
const sanitized = escapeHTML`User input: ${userInput}`;
console.log(sanitized); // Output: "User input: <script>alert("XSS")</script>"

Conclusión

Los literales de plantilla etiquetados proporcionan una herramienta versátil para la manipulación dinámica de cadenas en JavaScript. Pueden simplificar tareas como la internacionalización y el formato de cadenas personalizado, lo que genera un código más expresivo y fácil de mantener.