【JS】テンプレートリテラル(テンプレート文字列)

テンプレートリテラルとは、ES6で新しく使えるようになった構文のひとつ。
覚えておくと便利な書き方。

文字列を囲むときは、シングルクォート（‘文字’）やダブルクォート（“文字”）で囲んでいたが、テンプレートリテラルではバッククォート（`文字`）で囲む。
ちなみにバッククォートは 「shift」+「@」で入力できる。(USキーボードの場合は 「option」 +「~」)

const today = new Date();

let hour = today.getHours();
let min = today.getMinutes();
let sec = today.getSeconds();

// 通常の文字列に式を埋め込む場合(ES6がでる前)
document.write(hour + '時 ' + min + '分 ' + sec + '秒');

// テンプレートリテラルを使用した場合
document.write(`${hour}時 ${min}分 ${sec}秒`);

ES5までは文字列と変数の連結には「+」を使っていたので足し算なのか文字列連結なのか見分けがつきにくかった。
上記のように、テンプレートリテラルを使った方がコードが見やすいし、書きやすい。
他にも色々使い方があるので、気になる方は下記を参考に。

参考：MDN web docs