【Javascript/ES6】テンプレートリテラルを使って文字列を表示する

2022/11/04

テンプレートリテラルは文字列を変数と連結する際に「＋」を使わず埋め込むことができる記述法です。バックティック () で区切ります。シングルクォート（’）ではないので注意を。※「Shift」＋「@」で入力できます。

以下が例です。ECMAScript 6 で新しく使えるようになり、Edge、Google Chrome、Firefox も含めたほとんどのブラウザで利用可能です。

const message = document.getElementById('message');
let now = new Date();
message.innerText = `${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒`;
// [出力]
// 5時49分22秒

こんな風に計算式も埋め込むことも可能です。

const message = document.getElementById('message');
message.innerText = `5+3=${5+3}`;
// [出力]
// 5+3=8

- HTML/JavaScript