テンプレートリテラル（template literals）とは何ですか？

Question

Accepted Answer

**テンプレートリテラル** はバッククォート（`` ` ``）を使い、通常の文字列クォートにはない2つの機能を加えます。式の**埋め込み（interpolation）**と**複数行**文字列です。 ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` テンプレートリテラル以前は `"Hi " + name + ", " + count + ...` のように書く必要があり、冗長でエラーが起きやすいものでした。埋め込みのほうがはるかに読みやすくなります。 ## タグ付きテンプレート（応用）バッククォートの前に置かれた関数は、文字列の各部分と埋め込まれた値を受け取り、それらを処理できます。 ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` これは **styled-components** のようなライブラリや、安全な SQL/HTML エスケープ用ヘルパーを支えています。 ## なぜ重要なのかテンプレートリテラルは、今日では文字列を組み立てる標準的な方法です — 読みやすい埋め込み、容易な複数行テキスト、そして DSL のためのフック（タグ付きテンプレート）を提供します。