【JavaScript】テンプレートリテラルとタグ付きテンプレートの基本と応用

JavaScript

2023.07.202023.12.11

この記事は約5分で読めます。

記事内に広告が含まれています。

この記事では、JavaScript ES6のテンプレートリテラルとタグ付きテンプレートについて解説します。

これらの機能はコードをより読みやすく、効率的にします。

画面上でのメッセージ表示、ログ出力などに役立つでしょう。

1. テンプレートリテラルの基本
2. テンプレートリテラルでの式の評価
3. マルチラインのテンプレートリテラル
4. タグ付きテンプレートの基本
5. タグ付きテンプレートの応用
参考リンク
おわりに

1. テンプレートリテラルの基本

テンプレートリテラルは、バックティック (`) で囲むことで作成します。

テンプレートリテラル内では、${} を使って変数を直接埋め込むことができます。

let name = "佐藤";
console.log(`こんにちは、${name}さん!`); // こんにちは、佐藤さん!

2. テンプレートリテラルでの式の評価

${} 内ではJavaScriptの任意の式を評価することができます。

これにより、文字列の中で計算を行ったり、関数を呼び出したりすることが可能です。

let x = 5;
let y = 10;
console.log(`合計は: ${x + y}です`); // 合計は: 15です

3. マルチラインのテンプレートリテラル

テンプレートリテラルは複数行にまたがる文字列を作成するのにも役立ちます。

各行の改行はそのまま保持され、結果の文字列にも反映されます。

let multilineString = `これは文字列です
そして複数行に
またがります。`;
console.log(multilineString);
// これは文字列です
// そして複数行に
// またがります。

4. タグ付きテンプレートの基本

タグ付きテンプレートは、テンプレートリテラルを関数と一緒に使用することで、文字列の生成をカスタマイズするための機能です。

タグ関数では、テンプレートリテラル内の文字列と式が個別に扱われます。

以下のコード例では、tagというタグ関数を定義し、その後でテンプレートリテラルと一緒に使っています。

このtag関数は2つの引数を受け取ります。

第1引数はstringsで、テンプレートリテラル内の文字列部分を格納した配列です。

第2引数は...valuesで、テンプレートリテラル内の式の評価結果を格納した配列です。

function tag(strings, ...values) {
  console.log(strings); // ["こんにちは、", "さん!"]
  console.log(values); // ["佐藤"]
}

let name = "佐藤";
tag`こんにちは、${name}さん!`;

この例では、tag関数内でstringsとvaluesをログ出力していますが、これらの値を元に新たな文字列を生成することも可能です。

例えば、以下のように文字列と式の間にハイフンを挿入するタグ関数を作ることができます。

function hyphenate(strings, ...values) {
  let result = "";
  for (let i = 0; i < values.length; i++) {
    result += strings[i] + '-' + values[i];
  }
  result += strings[strings.length - 1]; // 最後の文字列部分を追加
  return result;
}

let adj = "美味しい";
let noun = "ラーメン";
console.log(hyphenate`彼は${adj}な${noun}が好きです。`);
// "彼は-美味しいな-ラーメンが好きです。"

上記の例では、hyphenateタグ関数を用いて、各式の前にハイフンを挿入した新たな文字列を生成しています。

これにより、テンプレートリテラルの生成する文字列をより細かく制御することができます。

これらのタグ付きテンプレートは非常に汎用性が高く、様々なシチュエーションで有効に活用することができます。

詳細な応用例については次の章で紹介します。

5. タグ付きテンプレートの応用

タグ付きテンプレートは、エスケープ処理や多言語対応など、様々な応用が可能です。

例えば、下記のようにHTMLのエスケープ処理を実装することができます。

function htmlEscape(strings, ...values) {
  let escaped = values.map(value => value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"));
  let result = strings[0];
  for(let i = 0; i < escaped.length; i++) {
    result += escaped[i] + strings[i + 1];
  }
  return result;
}

let tag = "<script>";
console.log(htmlEscape`次のタグは許可されていません: ${tag}`);
// 次のタグは許可されていません: <script>