テンプレートリテラル

(Web関連用語)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

テンプレートリテラルは文字列を表す方法のひとつで、文字の並びをバッククォーテーション(`)で囲って記述する。テンプレートリテラルでは改行文字をそのまま改行として入力できるほかに、文字列の中に式や変数の値を埋め込むことができる。

let msg = `こんにちは。
今日は天気がとてもいいですね。
散歩が気持ちいいです。`;

console.log(msg);
>> こんにちは。
>> 今日は天気がとてもいいですね。
>> 散歩が気持ちいいです。

このようにテンプレートリテラルを使うことで複数行にまたがる文字列を記述することができる。
なおテンプレートリテラルでもエスケープシーケンスは記述することができる。改行を表すのに \n を使用したり、文字列の中でバッククォーテーションを文字として使用したい場合には \` と記述する。

let msg = `テンプレートリテラルでは\`を使用します。\n他のエスケープシーケンスも使用できます。`;

console.log(msg);
>> テンプレートリテラルでは`を使用します。
>> 他のエスケープシーケンスも使用できます。

テンプレートリテラルのもう一つの特徴が文字列の中に式を埋め込める点である。テンプレートリテラルでは文字列の中で次のように式を記述することができる。

${式}

式の部分に変数を記述した場合、変数に格納されている値が文字列に埋め込まれる。式の部分に演算などが記述された場合は式が評価され、その結果が埋め込まれる。

let name = 'オレンジ';
let cost = 100;

let msg = `今日の${name}の値段は${Math.trunc(cost*1.1)}円です。`;
console.log(msg);
>> 今日のオレンジの値段は110円です。

上記の例では文字列の中に 2 つ式を埋め込んでいる。一つ目の ${name} の部分は変数 name の値で置き換えられている。二つ目の ${Math.trunc(cost*1.1)} の部分はまず cost*1.1 の演算を行ったあと Math.trunc メソッドを使って整数部分を取得し置き換えられている。

inserted by FC2 system