テンプレートリテラルを本当にテンプレートエンジンっぽく使うサンプル #JavaScript

テンプレートリテラルなるものがある

Perl、PHP、Rubyに代表されるスクリプト言語に比べると、初期のJavaSciptは以下の機能がなかったのが辛かった。

ヒアドキュメント
変数展開

ES2015 / ES6 になってからは、テンプレートリテラルという構文ができたので、もう大丈夫。

実行結果

ソースコード

teml.html

<html>

<script type="text/javascript">

// 静的なサンプル
function tab1(){
return  `
    <table border=1>
    <tr>
    <td>ああ</td>
    </tr>
    </table>
 `;
}

// 文字列変数を展開する
function tab2(mes){
return  `
    <table border=1>
    <tr>
    <td>${mes}</td>
    </tr>
    </table>
 `;
}

//配列変数の中でメソッドを使ってみる（配列を文字列に）
function tab3(ary){
return  `
    <table border=1>
    <tr>
    <td>${ary.join('|')}</td>
    </tr>
    </table>
 `;
}

//変数展開の中のメソッドの中で変数展開をする
function tab4(ary){
return `
    <table border=1>
    <tr>
    ${
    ary.map( item => `<td>${item}</td>`).join('')
    }
    </tr>
    </table>
 `;
}
</script>

<div id="main"></div>

<script type="text/javascript">
let ele = document.querySelector("#main");
ele.insertAdjacentHTML('beforeend',tab1());
ele.insertAdjacentHTML('beforeend',tab2('hello'));
ele.insertAdjacentHTML('beforeend',tab3(['a','b','c']));
ele.insertAdjacentHTML('beforeend',tab4(['a','b','c']));
</script>
</html>

こころ残り

HTMLテンプレートとして使うなら、htmlエスケープもしたいところ。

h()という関数を作って都度エスケープする（←ダサい。忘れそう）
${}自体を上書きしちゃう（← 変数の中にhtmlタグが登場することもある）
テンプレートに渡す前の変数や配列やハッシュの値を全部エスケープする
コメントで htsign さんからいただいた「テンプレートリテラルに関数をかませる」（← 読みやすい）