非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

テンプレートリテラルは文字列を変数と連結する際に「+」を使わず埋め込むことができる記述法です。バックティック () で区切ります。シングルクォート(’)ではないので注意を。※「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