Что такое тегированные литералы шаблона?

Тегированный литерал шаблона включает в себя литерал шаблона с префиксом функции, называемой тегом. Эта функция может обрабатывать и манипулировать содержимым литерала. Вот простой пример:

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);

Варианты использования тегированных литералов шаблонов

1. Интернационализация (i18n)

Помеченные литералы шаблона могут динамически переводить строки в зависимости от языкового стандарта пользователя. Вот пример использования японского языка:

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. Пользовательское форматирование строк

Они также могут реализовать собственную логику форматирования, например экранирование 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>"

Заключение

Литералы шаблонов с тегами предоставляют универсальный инструмент для динамического манипулирования строками в JavaScript. Они могут упростить такие задачи, как интернационализация и пользовательское форматирование строк, что приводит к созданию более выразительного и удобного в сопровождении кода.