O que são literais de modelo marcados?

Um literal de modelo marcado envolve um literal de modelo prefixado com uma função, chamada tag. Esta função pode processar e manipular o conteúdo do literal. Aqui está um exemplo simples:

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 literais de modelo marcados

1. Internacionalização (i18n)

Literais de modelo marcados podem traduzir strings dinamicamente com base na localidade do usuário. Aqui está um exemplo usando 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. Formatação de string personalizada

Eles também podem implementar lógica de formatação personalizada, como escape de HTML.

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

Conclusão

Literais de modelo marcados fornecem uma ferramenta versátil para manipulação dinâmica de strings em JavaScript. Eles podem simplificar tarefas como internacionalização e formatação de strings personalizadas, levando a um código mais expressivo e de fácil manutenção.