notitie

日々感じたことをメモ書き

JavaScriptのテンプレート文字列について調べてみた

テンプレート文字列(リテラル)とは

バッククオート(``)で文字列として入力することができ、改行文字 (\n) を使わずとも改行が可能。
テンプレート文字列はデータの埋め込み(ドル記号と波括弧(${expression})で表示する)が可能なので、「+」で文字列を連結させて表示させるよりもシンプルにコードが書ける。

特徴

1.改行がそのまま文字列として認識される

//TypeScriptで記述
let template1 = `
    this is apple.
    this is banana.
    this is orange.
`;
//JavaScriptにコンパイル後
var template1 = "\n    this is apple.\n    this is banana.\n    this is orange.\n";

//改行された状態で表示される
alert(template1);

2.変数の埋め込みが可能

//TypeScriptで記述
let template1 = `
    this is apple.
    this is banana.
    this is orange.
`;
let template2 = `
    We can do it.
    ${template1} //変数の埋め込み
    Hello world.
`;

//JavaScriptにコンパイル後
var template1 = "\n    this is apple.\n    this is banana.\n    this is orange.\n";
var template2 = "\n    We can do it.\n    " + template1 + "\n    Hello world.\n";

//文字列 + 変数の中身 + 文字列で表示される
alert(template2); 

参考記事

テンプレート文字列 - JavaScript | MDN
JavaScript の テンプレートリテラル を極める! - Qiita