ES6の文字列テンプレート:使い方と例

1. 変数の埋め込み: 文字列テンプレートでは、${}の中に変数名や式を埋め込むことができます。例えば、以下のように書くことができます。

const name = 'John';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

出力結果:

My name is John and I am 30 years old.

2. 式の埋め込み: 文字列テンプレートでは、${}の中に式を埋め込むこともできます。例えば、以下のように書くことができます。

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

出力結果:

The sum of 10 and 5 is 15.

3. 複数行の文字列: 従来の方法では、複数行の文字列を作成するために改行文字や連結演算子を使用する必要がありましたが、文字列テンプレートでは改行を含む複数行の文字列を簡単に作成できます。

const multiline = `
  This is a
  multiline
  string.
`;
console.log(multiline);

出力結果:

  This is a
  multiline
  string.

4. 関数の呼び出し: 文字列テンプレートでは、関数の呼び出しも埋め込むことができます。例えば、以下のように書くことができます。

function capitalize(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}
const word = 'javascript';
const capitalized = `Capitalized word: ${capitalize(word)}`;
console.log(capitalized);

出力結果:

Capitalized word: Javascript

上記のように、ES6の文字列テンプレートを使うと、変数や式を埋め込んだり、複数行の文字列を作成したりすることが簡単になります。これにより、コードの可読性が向上し、より効率的な開発が可能になります。ぜひ、実際のプロジェクトで活用してみてください。