JavaScriptで文字列に変数を埋め込むには？

JavaScriptで変数を文字列に埋め込む方法

JavaScriptで文字列を扱う際、変数の値を文字列内に埋め込みたい場合があります。本記事では、その方法について、具体例を交えながら解説します。

バッククォート(` `)による埋め込み

JavaScript ES6 (ECMAScript 2015) から導入された「バッククォート(`)」を使うと、簡単に文字列に変数を埋め込むことができます。以下のように、バッククォートで括った文字列の中に、${変数名} の形で変数名を記述します。

<script>
  const name = "太郎";
  const age = 20;

  const message = `私の名前は${name}です。${age}歳です。`;
  console.log(message); // 出力結果: 私の名前は太郎です。20歳です。
</script>

メリット

バッククォートによる埋め込みには、以下のようなメリットがあります。

メリット 説明
可読性の向上 文字列と変数が明確に分離され、コードが見やすくなります。
複数行の文字列に対応 バッククォートで囲むことで、複数行にわたる文字列を簡単に定義できます。
式や関数呼び出しも可能 ${} 内には、変数だけでなく、式や関数呼び出しを記述することも可能です。

使用例

以下に、具体的な使用例をいくつか示します。

クラスのメンバ

<script>
  class User {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    getGreeting() {
      return `こんにちは、${this.name}さん！`;
    }
  }

  const user = new User("太郎", 20);
  console.log(user.getGreeting()); // 出力結果: こんにちは、太郎さん！
</script>

数式

<script>
  const price = 1000;
  const tax = 0.1;

  const totalPrice = `合計金額は${price * (1 + tax)}円です。`;
  console.log(totalPrice); // 出力結果: 合計金額は1100円です。
</script>

参考記事

よくある質問

Q1. バッククォート以外で変数を埋め込む方法はありますか？

A1. はい、`+`演算子を使う方法があります。例えば、`'私の名前は' + name + 'です。'`のように記述します。しかし、この方法は可読性が低くなるため、バッククォートを使う方法が推奨されます。

Q2. ${} 内にJavaScriptのコードを記述することはできますか？

A2. はい、可能です。${} 内には、変数だけでなく、式や関数呼び出しなどのJavaScriptのコードを記述することができます。

Q3. バッククォートは古いブラウザでは使えませんか？

A3. Internet Explorer 11などの古いブラウザでは、バッククォートがサポートされていません。そのような場合は、Babelなどのトランスパイラを使って、ES6のコードを古いJavaScriptに変換する必要があります。

その他の参考記事:JavaScript 変数