什麼是標記模板文字？

帶有標籤的模板文字涉及以函數為前綴的模板文字，稱為標籤。此函數可以處理和操作文字的內容。這是一個簡單的例子：

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 中的動態字串操作提供了多功能工具。它們可以簡化國際化和自訂字串格式等任務，從而產生更具表現力和可維護性的程式碼。