文字列の中で変数を展開する

文字列の中で変数を使う

文字列と変数を組み合わせるときは結合演算子を使うことが多いですが、「`(バッククォート)」を使ったテンプレート文字列の記述にすると文字列の中で変数を展開することができます。
赤字の箇所でテンプレート文字列を使っています。

JS コード例

// 変数
let name = 'John';
let age = 30;

console.log(`Hi, I'm ${name}. My age is ${age}`);
// 出力： Hi, I'm John. My age is 30

// 配列
let person = new Array();
person.push("Emily");
person.push(14);

console.log(`Hi, I'm ${person[0]}. My age is ${person[1]}`);
// 出力： Hi, I'm Emily. My age is 14


// オブジェクト
let person2 = {
  name: "Tom",
  age: 23,
  job: "actor"
};

console.log(`Hi, I'm ${person2.name}. My age is ${person2.age}`);
// 出力： Hi, I'm Tom. My age is 23

テンプレート文字列を使うときは、文字列を「`(バッククォート)」で囲む必要がある点に注意してください。
「'(シングルクォーテーション)」や「"(ダブルクォーテーション)」は変数展開されず、変数名をそのまま出力します。

変数については、${〜}で囲みます。
変数の値のみでなく、配列の要素やオブジェクトのプロパティを出力することも可能です。

ただし、テンプレート文字列の書き方は2020年5月現在は最新のIE11を含む全てのIEシリーズでは対応していません。
IEへの対応が必要な場合は「+(結合演算子)」を使用してください。

JS コード例

// 変数
let name = 'John';
let age = 30;

console.log("Hi, I'm " + name + ". My age is " + age);

「+(結合演算子)」についてより詳しくは「文字列を結合する」をご覧ください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。