JavaScript文字列テンプレート解説

JavaScriptにおける文字列への変数の埋め込み（連結なし）

JavaScriptでは、文字列に変数を埋め込む際に、従来の連結手法に加えて、より簡潔な方法があります。この方法では、文字列テンプレートと呼ばれる構文を使用します。

文字列テンプレートの構文

文字列テンプレートは、バッククォート（）で囲まれた文字列であり、変数を埋め込むには、${変数名}`という構文を使用します。

例

const name = "Alice";
const age = 30;

const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // Output: Hello, Alice! You are 30 years old.

• 式評価
  テンプレート内の${}内で任意のJavaScript式を評価できます。
• 多行文字列
  バッククォートで囲むことで、複数の行にわたる文字列を直接記述できます。
• 可読性向上
  連結記号（+）を使用するよりも読みやすくなります。

const year = 2024;
const greeting = `Happy New Year ${year}!`;
console.log(greeting); // Output: Happy New Year 2024!

JavaScriptにおける文字列テンプレートの例

変数の埋め込み

const name = "Alice";
const age = 30;

const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // Output: Hello, Alice! You are 30 years old.

多行文字列

const poem = `Roses are red,
Violets are blue,
I love you.`;

console.log(poem);

式の評価

const x = 5;
const y = 10;

const result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // Output: The sum of 5 and 10 is 15.

タグ付きテンプレート

function greet(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + values[i - 1] + str);
}

const name = "Bob";
const greeting = greet`Hello, ${name}!`;
console.log(greeting); // Output: Hello, Bob!

連結演算子（+）

最も基本的な方法は、連結演算子（+）を使用して文字列を連結することです。

const name = "Alice";
const age = 30;

const greeting = "Hello, " + name + "! You are " + age + " years old.";
console.log(greeting); // Output: Hello, Alice! You are 30 years old.

String.prototype.concat()メソッド

concat()メソッドを使用して、文字列を連結することもできます。

const name = "Alice";
const age = 30;

const greeting = "Hello, ".concat(name).concat("! You are ").concat(age).concat(" years old.");
console.log(greeting); // Output: Hello, Alice! You are 30 years old.

テンプレートリテラル（ES6以前）

ES6以前のJavaScriptでは、テンプレートリテラルを使用することもできましたが、文字列テンプレートほど柔軟ではありませんでした。

const name = "Alice";
const age = 30;

const greeting = "Hello, " + name + "! You are " + age + " years old.";
console.log(greeting); // Output: Hello, Alice! You are 30 years old.