【js】ES6 タグ付きテンプレート文字列

テンプレート文字列を利用することで、文字リテラルに変数を埋め込めますが、

変数をそのまま埋め込むのではなく、加工した上で埋め込みたいということもあるでしょう。

例えば、

let subaru = '<strong>スバルくん</strong>'
let barusu = '<strong>バルス</strong>'

console.log(`${subaru}素敵です。${barusu}死になさい`);
// <strong>スバルくん</strong>素敵です。<strong>バルス</strong>死になさい

この時に<>タグをエスケープして出力したい場合に、タグ付きテンプレート文字列という機能があります！

function escapeHtml(str) {
  if (!str) { return ''; }
  str = str.replace(/</g, '&lt;');
  str = str.replace(/>/g, '&gt;');
  return str;
}

function e(templates, ...values) {
  let result = '';
  templates.forEach(function(template, index) {
    result += template + escapeHtml(values[index]);
  });
  return result;
}

let subaru = '<strong>スバルくん</strong>'
let barusu = '<strong>バルス</strong>'


console.log(e `${subaru}素敵です。${barusu}死になさい`);

// &lt;strong&gt;スバルくん&lt;/strong&gt;素敵です。&lt;strong&gt;バルス&lt;/strong&gt;死になさい

escapeHtml関数はタグをエスケープしてくれる関数です。

e`${subaru}素敵です。${barusu}死になさい`と見慣れない書き方ですが、

タグ付きテンプレートは

関数名`テンプレート文字列`

と記述します。

タグ付きテンプレートを使うためには関数は以下の条件を満たさないといけません。

• 引数として以下を受け取ること
  • テンプレート文字列（分解したもの）
  • 埋め込む変数（可変長数）
• 戻り値として加工済みの文字列を返すこと

この例では引数templates（テンプレート文字列）とvalues（埋め込み変数）とをforEachで交互に出力しています。

その際に、escapeHtml関数でタグをエスケープ処理しています。

forEachで交互に出力とはどういうことかというと

forEachの1周目
templates[0] → ''
values[0] → subaru = '<strong>スバルくん</strong>'

forEachの2周目
templates[1] → '素敵です。'
values[1] → barusu = '<strong>バルス</strong>'

forEachの3周目
templates[2] → '死になさい'
values[2] → ''

となっています。

これにより、テンプレート文字列に影響を与えずに変数の値だけを加工しているのです。