タグ付きテンプレート リテラルとは何ですか?

タグ付きテンプレート リテラルには、タグと呼ばれる関数がプレフィックスとして付けられたテンプレート リテラルが含まれます。この関数は、リテラルの内容を処理および操作できます。簡単な例を次に示します:

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 での動的な文字列操作のための多用途ツールを提供します。国際化やカスタム文字列の書式設定などのタスクを簡素化し、より表現力豊かで保守しやすいコードを実現できます。