テンプレート文字列

文字列に挿入する

ES2015までは変数の値と文字列をconsole.log()で出力したい場合は、以下のように+記号で結合をする必要がありました。

const name = 'Taro';
console.log('My name is ' + name +'.');

ES2015からはテンプレート文字列で文字列の中にプレースホルダを挿入することができます。
＊）プレースホルダとは変数の中身を置き換えることができる文字列のことです。
構文は以下の通りで　`（バッククォート）で囲み、$（ドル記号）と{}（波括弧）で作ることができます。
`（バッククォート）と ‘（シングルクォート）は全く別の文字になるため注意が必要です。

`${変数名や計算式などのリテラル}`

では、サンプルコードで確認をしてみましょう。
波括弧の中に変数名を指定することで、変数に格納されている値を文字列に挿入することができます。

function template_literals_1() {
  const name = 'Taro';
  console.log(`My name is ${name}.`);
}


My name is Taro.

波括弧の中には値や変数だけでなく四則演算子も指定できます。
そのため、以下のように計算式を指定することもできます。

function template_literals_2() {
  const num1 = 1;
  const num2 = 2;
  console.log(`Result:${num1 + num2}`);
}


Result:3

また、テンプレート文字列内で改行をすると、文字列を複数行にすることもできます。

function template_literals_3() {
  console.log(`1行目
2行目`);
}


1行目
2行目