JavaScriptのテンプレートリテラル（ES6/ES2015）

投稿日: 2022-04-20 2022-10-07
タグ: javascript

ECMAScript 2015仕様（ ES6 ）は、文字列補間および複数行文字列用のテンプレートリテラルを提供します。テンプレート文字列として聞いたことがあるかもしれません。テンプレートリテラルの定義に使用される文字はバックティック（ `）で、ほとんどのキーボードレイアウトで1の右側にあります。

テンプレートリテラルを使用した文字列補間の例を次に示します。

function greeting(firstName, lastName) {
  let message = `Hello ${firstName} ${lastName}`;
  return message;
}

そして、これが複数行の文字列の例です。

console.log(`Right now
  is the perfect time to
  learn JavaScript`);

そして、テンプレートリテラルを使用した文字列補間と複数行文字列の能力のさらに別の例を次に示します。

var user = { name: "Joe", email: "[email protected]" };
var item = { quantity: 3, price: 4.99 };

var message = `Name: ${user.name}
Email: ${user.email}

Total price: ${item.quantity * item.price}`;

上記の例からコンソールに記録されるメッセージは次のとおりです。

Name: Joe
Email: [email protected]
-----
Total price: 14.97

getdocs

13036