javascript ${}(テンプレートリテラル)の使い方

• 作成日 2020.09.16
• 更新日 2022.06.23
• javascript
• javascript

javascriptで、変数を文字列内に埋め込むことができる、${}(テンプレートリテラル)の使い方を記述してます。

目次

• 1. 環境
• 2. ${}(テンプレートリテラル)使い方

環境

• OS windows10 pro 64bit
• Apache 2.4.43
• ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

${}(テンプレートリテラル)使い方

${}(テンプレートリテラル)を使用すると、以下のように、変数を文字列内に埋め込むことが可能です。

let hoge = 'mebee';
let str = `このサイトの名前は${hoge}です`;
console.log(str);

実行結果

計算結果も扱うことができます。

let result =  `1 + 2 = ${1 + 2}`;
console.log(result);

実行結果

関数も使用可能です。

function hello() { return 'hello'; }

let result = `${hello()}`;
console.log(result); // hello

ただし、${}(テンプレートリテラル)は、IEだとエラーになるので使えません。

• 前の記事
  

  javascript opacity(透明度)を変更する 2020.09.16

• 次の記事
  

  OpenLiteSpeed バーチャルホストの設定手順 2020.09.17