JavaScriptでのテンプレートリテラルとタグ付きテンプレート – JavaScriptで始めるプログラミング

テンプレートリテラルとは？

テンプレートリテラルは、バッククォート（`）で囲まれた文字列で、埋め込み式やマルチライン文字列をサポートします。例えば：

const name = '太郎';
const message = `こんにちは、${name}さん`;
console.log(message); // こんにちは、太郎さん

タグ付きテンプレートとは？

タグ付きテンプレートは、テンプレートリテラルにタグ関数を適用したもので、カスタム処理を行うことができます。例えば：

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
  return 'タグ付きテンプレートの結果';
}
const result = tag`名前は${name}です。年齢は${age}歳です。`;
console.log(result); // タグ付きテンプレートの結果

テンプレートリテラルの利点

• 可読性の向上: 変数や式を直接埋め込むことで、コードが明確になります。
• マルチラインサポート: バッククォート内で改行が可能です。
• 簡単な計算: 数値計算や関数の呼び出しを埋め込むことができます。

タグ付きテンプレートの使用例

例えば、SQLクエリのサニタイズを行うタグ付きテンプレート関数を考えてみましょう：

function sanitize(strings, ...values) {
  return strings.reduce((result, string, i) => {
    const value = values[i] ? String(values[i]).replace(/'/g, "\\'") : '';
    return result + string + value;
  }, '');
}
const userInput = "悪意のある文字列'";
const query = sanitize`SELECT * FROM users WHERE name = '${userInput}'`;
console.log(query); // SELECT * FROM users WHERE name = '悪意のある文字列\'

まとめ

ここまで、JavaScriptにおけるテンプレートリテラルとタグ付きテンプレートの基本的な使い方と利点について説明しました。テンプレートリテラルは文字列操作の新たな可能性を提供し、タグ付きテンプレートはさらに高度なカスタム処理を実現します。これらの機能を駆使することで、JavaScriptでのプログラミングが一層楽しく、そして効率的になります。