ES2015 のタグ付きテンプレート関数を試す
ES2015 になって、テンプレートリテラルが追加されたことは以前記した。
コレに関して、「タグ付きテンプレート関数」という機能も存在していたのだが、今まで使ったことがなくあまり知らなかった。試しに使ってみる。
普通にテンプレートリテラルを引数に取る関数を作ると、以下のようになるだろう。
function normalFunction(text) {
console.log(text);
}
normalFunction(`This is ${'template'} literal. ${0}`);
// → This is template literal. 0
一方、タグ付きテンプレート関数は、関数呼び出し時にカッコ () を付けずに呼び出す。すると、当該関数の引数として渡る値が変化する。
function taggedFunction(strings, ...values) {
console.log('Strings : ', strings);
console.log('Values : ', values);
}
taggedFunction`This is ${'template'} literal. ${0}`;
// → Strings : [ "This is " , "literal. " , "" ]
// → Values : [ "template" , 0 ]
テンプレートリテラルの変数部分が、可変長引数 values で受け取れるようになっている。そして変数部分で split() されたような文字列の配列が、第1引数 strings で受け取れている。
つまり、テンプレートリテラルに埋め込んだ変数を個別に取得できるので、それに合わせて任意の処理を噛ませたりできるようになるワケだ。末尾が分かるよう、strings の最後には空文字の要素が入っている。
// 変数の前後にカッコを付けて返す
function taggedFunction(strings, ...values) {
return strings.reduce((result, str, index) => {
const value = '【' + values[index - 1] + '】';
return result + value + str;
});
// result の初期値は strings[0] になっている
}
const result = taggedFunction`This is ${'template'} literal. ${0}`;
// → This is 【template】 literal. 【0】
このように、テンプレートリテラルの変数部分に個別の処理を行った上で返したりできるようになる。
使い所は多くないが、読み方は覚えておきたい。
