こちらの記事は以下の書籍を参考に執筆しました
DLSとは
言語の機能や構文をうまく使って、その言語に最初からサポートされていたかのように特定のタスクを解決することです。
以降では文字列を処理するためのヘルパー関数を作成していきます。
ヘルパー関数を作成する
前回のテンプレートの記事ではこのようなコードを持つ関数を定義しました。
function stringWS() {
let stringParts = arguments[0];
let values = [].slice.call(arguments, 1)
}
let values = [].slice.call(arguments, 1)で文字列部分と補間部分を取得しています。
しかし上記コードでは少しわかりにくいです。
さしあたり、この部分をレイヤ化して、ロジックの他の部分から隠してしまいます。
そのための関数を作成し、取得した値をタグ関数に渡すようにすれば良いでしょう。
function createTag(func) {
return function() {
const strs = arguments[0];
const vals = [].slice.call(arguments, 1);
return func(strs, vals);
}
}
後は、タグ関数を次のように作成します。
javascript
const stringW = createTag(function(strs, vals) {
/* strsとvalsを使った処理 */
})
また渡された文字列strsと補間値valsをつなぎ合わせるためにreduceを使用する必要があります。これも抽象化してしまいます。
function interlace(strs, vals) {
vals = vals.slice(0); //配列のコピーを作成
return strs.reduce(function(all, str) {
return all + String(vals.shift()) + str;
});
}
vals = vals.slice(0);で配列をコピーしています。
shiftのように配列をその場で変更してしまうときにはこのようにします。
あとはcreateTagとinterlaceを組み合わせれば標準的な実装でテンプレートリテラルを処理できます。
const processNormally = createTag(interlace);
const text = 'Click Me';
const link = processNormally `<a>${text}</a>`; // <a>Click Me</a>