【JavaScript】テンプレートリテラルで変数と文字列を簡単に組み合わせる方法

JavaScriptでは、変数と文字列を組み合わせるときにテンプレートリテラルを使うと、コードをすっきり書けます。ここではその基本的な使い方を紹介します。

コード
簡単な解説
1. 補足

コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テンプレートリテラル</title>
  </head>
  <body>
    <p></p>
    <script>
      const person = {
        name: '佐藤',
        age: 26,
      };

      const p = document.querySelector('p');

      // 従来の書き方（文字列結合）
      // p.textContent = person.name + 'さんは' + person.age + '歳です';

      // テンプレートリテラルを使った書き方（バッククォートと${}を使う）
      p.textContent = `${person.name}さんは${person.age}歳です`;
    </script>
  </body>
</html>

このコードは、テンプレートリテラルを使ってオブジェクトの値を文字列の中に埋め込む方法を示しています。

簡単な解説

オブジェクトの定義

const person = {
  name: '佐藤',
  age: 26,
};

person という名前のオブジェクトを定義しています。中には name（名前）と age（年齢）の情報が入っています。

HTMLの <p> 要素を取得

const p = document.querySelector('p');

ページ内の <p> タグを取得して、そこに文字を表示する準備をしています。

テンプレートリテラルを使って文字列を組み立て

p.textContent = `${person.name}さんは${person.age}歳です`;

バッククォート ` と ${} を使って、オブジェクトの name と age の値を文字列の中に埋め込んでいます。

実行結果：

佐藤さんは26歳です

補足

コメントアウトされた部分には、従来の文字列結合の書き方もあり、それと比べてテンプレートリテラルの方が見やすく・簡潔に書けることがわかります。

// 従来の書き方
// person.name + 'さんは' + person.age + '歳です'