【JavaScript】テンプレート文字列をカスタマイズする-タグ付きテンプレート文字
テンプレート文字列を使用することで、文字列に変数を埋め込むことができる。
|
1 2 |
var val = '埋め込み文字列' console.log{`val = ${val}`} |
ECMAScript2015では、このテンプレート文字列を独自にカスタマイズすることができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//カスタマイズのエスケープ処理 function customEscape(str) { if(!str) {return '';} str = str.replace(/1/g, '一'); str = str.replace(/2/g, '二'); str = str.replace(/3/g, '三'); str = str.replace(/4/g, '四'); str = str.replace(/5/g, '五'); return str; } function e(templates, ...values) { let result = ''; for (let i = 0, len = templates.length; i < len; i++) { result += templates[i] + customEscape(values[i]); } return result; } //呼び出し let str = '12345'; console.log(e`エスケープ処理：[${str}]`); //【結果】エスケープ処理：[一二三四五] |
引数templatesは、テンプレート文字列の配列が渡される。
上記の例だと
templates[0] = エスケープ処理：[
templates[1] = ]
が渡されている。
valuesは、埋め込みプレースホルダ。(${n})
上記の例だと、「12345」がそれに該当する。
処理としては、values[i]をエスケープ後、templates[i]とvalues[i]を連結、というのを要素数分繰り返しているだけ。
複雑そうに見えるが、じっくり処理を追ってみれば、やっていることは単純だとわかる。
タグ :
JavaScript
