JavaScript

レシピ

文字列

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

文字列の中で変数を展開する方法について解説します。

この記事のポイント

  • 変数を「`(バッククォート)」で囲ったテンプレート文字列の記述にする
  • 配列の要素やオブジェクトのプロパティも文字列の中で展開できる

文字列の中で変数を使う

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

コード例

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

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

// 配列
var 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


// オブジェクト
var 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への対応が必要な場合は「+(結合演算子)」を使用してください。

コード例

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

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

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

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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