スタートページJavascript

テンプレートリテラル


テンプレートリテラル(template-literal)とは、組み込み式を扱うことができる文字列リテラルです。 複数行の文字列や文字列挿入機能を使用することができます。

文字列の折り返し ` `

従来は、文字列の途中で改行することはできませんでした。
    var 文字列 = "おはよう
    ございます";
テンプレートリテラルは、ダブルクオートやシングルクオートの代わりにバッククォーテーション「`」(Shift+@)で囲みます。
    var 文字列 = `おはよう
    ございます`;
とすると、
    var 文字列 = "おはようございます";
と同じになります。2行目は行頭からとみなされるので、半角スペースなどを置かず行頭から記述する必要があります。

alert 等での改行

ここではHTMLではないので改行に <br> ではなくエスケープ「\n」を使うのでした。
    alert("第1行\n第2行");
それを次のように記述できます。
    alert(`第1行
    第2行`);

逆に、エスケープを外したいときは、
    var 文字列 = "第1行\n第2行";
String.raw(文字列);
とします。

文字列への式の挿入 ${}

    document.getElementById("表示場所").innerHTML = ・・・;
などのときに、右辺を「バナナ(商品名) の価格は 100(価格) 円です。」 を表示したいとき、通常では
    商品名 + "の価格は" + 価格 + "円です。"
としますが、全体を「`」で囲んで、
    `${商品名} の価格は ${価格} 円です。`
とできます。文字列結合の「+」や地の部分の「" "] が不要になり、簡潔な表現になります。
${} は、式を評価した結果をその位置に挿入します。もし価格を消費税込みにするならば、`
    `${商品名} の価格は ${Math.floor(価格*1.1)} 円です。`
と記述できます。

タグ付きテンプレートリテラル

私には難しいし、用途も思いつかないので省略します。