Que sont les littéraux de modèle balisés ?

Un littéral de modèle balisé implique un littéral de modèle préfixé par une fonction, appelée balise. Cette fonction peut traiter et manipuler le contenu du littéral. Voici un exemple simple :

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

Cas d'utilisation des littéraux de modèles balisés

1. Internationalisation (i18n)

Les littéraux de modèle balisés peuvent traduire dynamiquement des chaînes en fonction des paramètres régionaux de l'utilisateur. Voici un exemple utilisant le japonais :

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. Formatage de chaîne personnalisé

Ils peuvent également implémenter une logique de formatage personnalisée, telle que l'échappement du 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>"

Conclusion

Les littéraux de modèle balisés fournissent un outil polyvalent pour la manipulation dynamique de chaînes en JavaScript. Ils peuvent simplifier des tâches telles que l'internationalisation et le formatage de chaînes personnalisé, conduisant à un code plus expressif et plus maintenable.