JavaScriptのテンプレートリテラル完全解説!7つの使い方と10の応用例

JavaScriptのテンプレートリテラルの使い方と応用例を解説するイメージJS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptで文字列を扱う際に便利な機能として、テンプレートリテラルがあります。

この記事では、テンプレートリテラルの基本的な使い方から注意点、カスタマイズ方法、さらには10の応用例まで分かりやすく解説します。

●テンプレートリテラルとは

テンプレートリテラルは、JavaScriptの文字列リテラルの一種で、バッククォート(“)で囲まれた文字列を表します。

テンプレートリテラルでは、変数や式を埋め込むことができ、複数行の文字列も簡単に作成できます。

これにより、従来の文字列操作に比べてシンプルで読みやすいコードが書けるようになります。

●テンプレートリテラルの基本的な使い方

○サンプルコード1:変数を含む文字列の作成

テンプレートリテラルを使って、変数を含む文字列を作成する方法を見ていきましょう。

下記のサンプルコードでは、${name}という形式で変数nameを埋め込んでいます。

const name = 'Taro';
const message = `Hello, ${name}!`;
console.log(message); // "Hello, Taro!"

○サンプルコード2:複数行の文字列の作成

テンプレートリテラルを使うと、複数行の文字列を簡単に作成できます。

下記のサンプルコードでは、改行を含む文字列が作成されています。

const message = `This is a
multiline
string!`;
console.log(message);
// "This is a
// multiline
// string!"

●テンプレートリテラルの注意点と対処法

テンプレートリテラルを使用する際の注意点として、バッククォートが使われていることによる影響が考えられます。

例えば、バッククォートを含む文字列をテンプレートリテラルで表現する場合は、バッククォートをエスケープする必要があります。

const message = `This string contains a backquote: \``;
console.log(message); // "This string contains a backquote: `"

●テンプレートリテラルのカスタマイズ方法

○サンプルコード3:タグ付きテンプレートリテラル

テンプレートリテラルは、タグ付きテンプレートリテラルという形でカスタマイズすることができます。

タグ付きテンプレートリテラルでは、関数を使ってテンプレートリテラルの処理を変更できます。

下記のサンプルコードでは、toUpperCase関数を使って、埋め込まれた変数の値を大文字に変換しています。

function toUpperCase(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}

const name = 'Taro';
const message = toUpperCase`Hello, ${name}!`;
console.log(message); // "Hello, TARO!"

●テンプレートリテラルの応用例

○サンプルコード4:条件付き文字列の結合

テンプレートリテラルを使って、条件に応じて文字列を結合することができます。

下記のサンプルコードでは、isMorningの値によって、挨拶の文字列が変わります。

const isMorning = true;
const greeting = `Good ${isMorning ? 'morning' : 'evening'}!`;
console.log(greeting); // "Good morning!"

○サンプルコード5:HTMLの生成

テンプレートリテラルを使って、HTMLコードを簡単に生成することができます。

下記のサンプルコードでは、createList関数を使って、配列からHTMLのリストを生成しています。

function createList(items) {
  return `<ul>
${items.map(item => `  <li>${item}</li>`).join('\n')}
</ul>`;
}

const items = ['apple', 'banana', 'orange'];
const list = createList(items);
console.log(list);
// "<ul>
//   <li>apple</li>
//   <li>banana</li>
//   <li>orange</li>
// </ul>"

○サンプルコード6:テンプレートリテラルを使ったループ

テンプレートリテラルを使って、ループ処理を行うことができます。

下記のサンプルコードでは、n回繰り返す文字列を生成しています。

function repeatString(str, n) {
  return `${str.repeat(n)}`;
}

const result = repeatString('abc', 3);
console.log(result); // "abcabcabc"

○サンプルコード7:関数内でのテンプレートリテラルの使用

テンプレートリテラルを関数の引数や戻り値として使用することができます。

下記のサンプルコードでは、createGreeting関数を使って、名前と年齢を受け取り、挨拶のメッセージを生成しています。

function createGreeting(name, age) {
  return `Hello, ${name}! You are ${age} years old.`;
}

const name = 'Taro';
const age = 25;
const greeting = createGreeting(name, age);
console.log(greeting); // "Hello, Taro! You are 25 years old."

○サンプルコード8:オブジェクトリテラル内でのテンプレートリテラルの使用

テンプレートリテラルはオブジェクトリテラルのプロパティ値としても使用できます。

次の例では、personオブジェクトのintroduceプロパティに、自己紹介メッセージを生成する関数を設定しています。

const person = {
  name: 'Taro',
  age: 25,
  introduce() {
    return `Hello! My name is ${this.name} and I am ${this.age} years old.`;
  },
};

console.log(person.introduce());
// "Hello! My name is Taro and I am 25 years old."

○サンプルコード9:テンプレートリテラルを使った数式の評価

テンプレートリテラル内で数式を使用することもできます。

次の例では、abの足し算の結果をテンプレートリテラル内で評価しています。

const a = 5;
const b = 7;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum);
// "The sum of 5 and 7 is 12."

○サンプルコード10:テンプレートリテラルを使った正規表現

テンプレートリテラルは正規表現の作成にも使用できます。

次の例では、テンプレートリテラルを使って動的に正規表現を作成し、文字列の検索に使用しています。

const searchWord = 'apple';
const regex = new RegExp(`\\b${searchWord}\\b`, 'gi');
const text = 'I love apples. Apples are delicious.';

const result = text.match(regex);
console.log(result);
// ["apple", "Apples"]

●テンプレートリテラルの注意点と対処法

  1. バッククォート()の使用

    テンプレートリテラルでは、バッククォート()を使って文字列を定義することに注意してください。
    シングルクォート(”)やダブルクォート(“”)では、テンプレートリテラルの機能を利用できません。

  2. エスケープ文字の扱い

    テンプレートリテラルでは、バックスラッシュ()を使ってエスケープ文字を扱うことができます。
    例えば、バッククォート自体を含める場合は、`${"`というように書くことができます。

  3. ネストしたテンプレートリテラル

    テンプレートリテラルをネストして使用することも可能です。
    ただし、可読性が低くなることがあるため、適切な場面での使用を心掛けてください。

  4. 性能面の注意点

    テンプレートリテラルは便利な機能ですが、文字列の結合が多くなると、性能に影響を与えることがあります。
    特にループ処理や大量の文字列操作が必要な場合は、適切な方法を検討してください。

まとめ

この記事では、JavaScriptのテンプレートリテラルの基本概念、使い方、カスタマイズ方法、応用例、注意点と対処法を紹介しました。

テンプレートリテラルは、文字列の結合や埋め込みを簡単に行うことができる便利な機能です。

JavaScriptを書く際に、ぜひ活用してみてください。