ECMAScript テンプレートリテラル

(自分用メモ) ES6のテンプレートリテラルを使うと、HTML生成におけるテンプレート的なものがJavaScriptでも書きやすくなる。

function safeHtml(){
    var t = arguments[ 0 ].raw;
    var result = t[ 0 ];
    for( var i = 1; i < arguments.length; i++ ){
        result += arguments[i]
            .replace( /&/g, "&amp;")
            .replace( /</g, "&lt;" )
            .replace( />/g, "&gt;" )
            .replace( /"/g, "&quot;" )
            .replace( /'/g, "&#x27;" )
            + t[i];
    }
    return result;
}

var userinput = "<img src=# onerror=alert(1)>";
var html=safeHtml`<div>\r\n←これはそのまま円記号+英数字で表示される<div>${userinput}</div></div>`;
var elm.innerHTML = html;