はじめに
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：テンプレートリテラルを使った数式の評価
テンプレートリテラル内で数式を使用することもできます。
次の例では、aとbの足し算の結果をテンプレートリテラル内で評価しています。
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"]●テンプレートリテラルの注意点と対処法
- バッククォート()の使用
テンプレートリテラルでは、バッククォート()を使って文字列を定義することに注意してください。
シングルクォート(”)やダブルクォート(“”)では、テンプレートリテラルの機能を利用できません。 - エスケープ文字の扱い
テンプレートリテラルでは、バックスラッシュ()を使ってエスケープ文字を扱うことができます。
例えば、バッククォート自体を含める場合は、`${"`というように書くことができます。 - ネストしたテンプレートリテラル
テンプレートリテラルをネストして使用することも可能です。
ただし、可読性が低くなることがあるため、適切な場面での使用を心掛けてください。 - 性能面の注意点
テンプレートリテラルは便利な機能ですが、文字列の結合が多くなると、性能に影響を与えることがあります。
特にループ処理や大量の文字列操作が必要な場合は、適切な方法を検討してください。
まとめ
この記事では、JavaScriptのテンプレートリテラルの基本概念、使い方、カスタマイズ方法、応用例、注意点と対処法を紹介しました。
テンプレートリテラルは、文字列の結合や埋め込みを簡単に行うことができる便利な機能です。
JavaScriptを書く際に、ぜひ活用してみてください。
