文字列中にプレースホルダーを設定して変数の値を文字列中に表示する - JavaScript でFormat関数と同様の処理をしたい - JavaScript

文字列中にプレースホルダーを設定して変数の値を文字列中に表示するコードを紹介します。

概要

JavaScript でC#のFormat関数と同様に、文字列中にプレースホルダーを設定して変数の値を文字列中で表示したい場合があります。
javaScriptでは、「テンプレートリテラル」文字列を利用すると、同様の処理が実現できます。

注意

Internet Explorer では利用できない点に注意が必要です。

書式

`文字列`

バッククォート(バックティック)文字で囲み文字列を表現すると、テンプレートリテラルの文字列となります。

`${変数名}`

${変数名} と記述すると、タグの記述になり変数の値を文字列中に埋め込むことができます。

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function onButtonClick() {
      var product_name;
      var product_price;

      product_name = "ぺんぎんクッキー";
      product_price = 380;
      var elem1 = document.getElementById("output1");
      elem1.innerText = `商品名:${product_name} - 価格:${product_price}`;

      product_name = "らくだキャラメル";
      product_price = 85;
      var elem2 = document.getElementById("output2");
      elem2.innerText = `商品名:${product_name} - 価格:${product_price}`;

      product_name = "しろくまアイス";
      product_price = 420;
      var elem3 = document.getElementById("output3");
      elem3.innerText = `商品名:${product_name} - 価格:${product_price}`;
    }
  </script>
</head>
<body>
  <h1>テンプレートリテラル タグのデモ</h1>
  <button onclick="onButtonClick();">Exec</button>
  <div id="output1"></div>
  <div id="output2"></div>
  <div id="output3"></div>
</body>
</html>

解説

以下のコードでは、product_name 変数に "ぺんぎんクッキー" を代入し、product_price 変数に 280を代入しています。 id="output1" の要素を取得し、innerText プロパティに文字列を代入して文字列を画面に表示します。
文字列はテンプレートリテラルで表現しており、${product_name} にproduct_name 変数の値が入り、 ${product_price}にproduct_price 変数の値が入るため、画面に表示される文字列は "商品名:ぺんぎんクッキー - 価格:380" となります。

  product_name = "ぺんぎんクッキー";
  product_price = 380;
  var elem1 = document.getElementById("output1");
  elem1.innerText = `商品名:${product_name} - 価格:${product_price}`;

他の2つの枠についても同様の処理になります。

  product_name = "らくだキャラメル";
  product_price = 85;
  var elem2 = document.getElementById("output2");
  elem2.innerText = `商品名:${product_name} - 価格:${product_price}`;

  product_name = "しろくまアイス";
  product_price = 420;
  var elem3 = document.getElementById("output3");
  elem3.innerText = `商品名:${product_name} - 価格:${product_price}`;

なお、JavaScriptの関数部分は以下のコードでも動作します。

   function onButtonClick() {
      var tstr;
      var product_name;
      var product_price;

      product_name = "ぺんぎんクッキー";
      product_price = 380;
      tstr = `商品名:${product_name} - 価格:${product_price}`;
      var elem1 = document.getElementById("output1");
      elem1.innerText = tstr;

      product_name = "らくだキャラメル";
      product_price = 85;
      tstr = `商品名:${product_name} - 価格:${product_price}`;
      var elem2 = document.getElementById("output2");
      elem2.innerText = tstr;

      product_name = "しろくまアイス";
      product_price = 420;
      tstr = `商品名:${product_name} - 価格:${product_price}`;
      var elem3 = document.getElementById("output3");
      elem3.innerText = tstr;
    }

実行結果

WebブラウザでHTMLファイルを表示すると、下図の画面が表示されます。

[Exec]ボタンをクリックします。ボタンの下にテキストが表示されます。テンプレートリテラル文字列内に変数の値が埋め込まれて画面に表示されることが確認できます。

参考:意図したとおりに動作しない例

意図したとおりに動作しない例を紹介します。
以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function onButtonClick() {
      var tstr = `商品名:${product_name} - 価格:${product_price}`;
      var product_name;
      var product_price;

      product_name = "ぺんぎんクッキー";
      product_price = 380;
      var elem1 = document.getElementById("output1");
      elem1.innerText = tstr;

      product_name = "らくだキャラメル";
      product_price = 85;
      var elem2 = document.getElementById("output2");
      elem2.innerText = tstr;

      product_name = "しろくまアイス";
      product_price = 420;
      var elem3 = document.getElementById("output3");
      elem3.innerText = tstr;

    }
  </script>
</head>
<body>
  <h1>テンプレートリテラル タグのデモ</h1>
  <button onclick="onButtonClick();">Exec</button>
  <div id="output1"></div>
  <div id="output2"></div>
  <div id="output3"></div>
</body>
</html>

実行結果

WebブラウザでHTMLファイルを表示し、[Exec]ボタンをクリックします。ボタンの下部にテキストが表示されますが、3つとも underdefined の表示になってしまいます。

原因

テンプレートリテラルの文字列に変数が設定されるのは、テンプレートリテラル文字列の作成時になります。テンプレートリテラルを作成した後に、変数に値を代入しても、テンプレートリテラル文字列には反映されない点に注意が必要です。

次のコードの場合は、テンプレートリテラルの作成後に変数の値を変更しているため、出力は3つとも"商品名:ぺんぎんクッキー - 価格:380"になります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function onButtonClick() {
      var product_name;
      var product_price;

      product_name = "ぺんぎんクッキー";
      product_price = 380;
      var tstr = `商品名:${product_name} - 価格:${product_price}`;
      var elem1 = document.getElementById("output1");
      elem1.innerText = tstr;

      product_name = "らくだキャラメル";
      product_price = 85;
      var elem2 = document.getElementById("output2");
      elem2.innerText = tstr;

      product_name = "しろくまアイス";
      product_price = 420;
      var elem3 = document.getElementById("output3");
      elem3.innerText = tstr;
    }
  </script>
</head>
<body>
  <h1>テンプレートリテラル タグのデモ</h1>
  <button onclick="onButtonClick();">Exec</button>
  <div id="output1"></div>
  <div id="output2"></div>
  <div id="output3"></div>
</body>
</html>

このページのキーワード

文字列中にプレースホルダーを設定して変数の値を文字列中に表示する - JS でFormat関数と同様の処理をしたい

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

最終更新日: 2022-02-18

作成日: 2022-02-16

目次

文字列中にプレースホルダーを設定して変数の値を文字列中に表示する - JavaScript でFormat関数と同様の処理をしたい - JavaScript

概要

書式

プログラム例

コード

解説

実行結果

参考:意図したとおりに動作しない例

実行結果

原因