Was sind getaggte Vorlagenliterale?

Bei einem mit Tags versehenen Vorlagenliteral handelt es sich um ein Vorlagenliteral, dem eine Funktion vorangestellt ist, die als Tag bezeichnet wird. Diese Funktion kann den Inhalt des Literals verarbeiten und manipulieren. Hier ist ein einfaches Beispiel:

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

Anwendungsfälle für getaggte Vorlagenliterale

1. Internationalisierung (i18n)

Mit Tags versehene Vorlagenliterale können Zeichenfolgen basierend auf dem Gebietsschema des Benutzers dynamisch übersetzen. Hier ist ein Beispiel mit Japanisch:

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. Benutzerdefinierte Zeichenfolgenformatierung

Sie können auch benutzerdefinierte Formatierungslogik implementieren, z. B. HTML-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>"

Abschluss

Mit Tags versehene Vorlagenliterale bieten ein vielseitiges Werkzeug für die dynamische String-Manipulation in JavaScript. Sie können Aufgaben wie Internationalisierung und benutzerdefinierte Zeichenfolgenformatierung vereinfachen und so zu aussagekräftigerem und wartbarerem Code führen.