JavaScriptのタグ付きテンプレートリテラル（ES6/ES2015）

テンプレートリテラルについて簡単に説明しましたが、タグについては説明しなかった追加機能があります。 テンプレートリテラルに呼び出される関数をタグ付けして、テンプレートリテラルのコンテンツに対して一種のプリプロセッサとして機能させることができます。

テンプレートリテラルの典型的な例を次に示します。

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = `Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm Benedict and I'm busy at being awesome.

次に、リテラルにuseless関数のタグを付けましょう。

function useless(strings, ...values) {
  return 'I render everything useless.';
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = useless`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// I render everything useless.

明らかに、上記は何の役にも立ちませんが、文字列と値を使用して、何らかの処理でテンプレートリテラルを作成すると、より強力になります。

現在の例では：

• 文字列 3つの値を持つ配列です： やあ！ 私は 、 そして私はで忙しいと 。
• values は、 name と occupation 変数。 これらの値は追加のパラメーターとしてタグ付き関数に渡されますが、ここでは rest parameters を使用して、すべての追加パラメーターをvalues配列に収集します。

常にもう1つのstrings値があり、次に補間値があります。 この例では、then文の終わりにピリオドがない場合、 strings 配列の最後の値は空の文字列になり、もう1つの文字列値が必要であるという事実を満たします。

したがって、その知識を身に付ければ、実際に何かを実行する文字列リテラルのタグ関数を作成できます。

function uppercase(strings, ...values) {
  let newStr = '';

  for (let i = 0; i < strings.length; i++) {
    if (i > 0) {
      newStr += values[i-1].toUpperCase();
    }
    newStr += strings[i];
  }

  return newStr;
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = uppercase`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm BENEDICT and I'm busy at BEING AWESOME.