ES6 (or if you like ES2015) では Template Literals でテンプレートストリングを作成できるようになりました。 テンプレート リテラルは、変数や関数を注入することができる文字列です。 これを使えば、プラス記号+を使わずに文字列と変数を連結して記述することができます。

変数の連結：

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

テンプレート リテラルと変数：

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

ここでの違いは、変数名の周りにドル記号と中括弧${}を使って、プラス記号 ${variableName} を使わないということです。 これにより、文字列と変数の併用がより読みやすくなります。

行の連結：

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

テンプレート リテラル行：

let string = `The quick brown fox
jumps over
the lazy dog`;

さて、テンプレート リテラルがテンプレート エンジンによく似ていることが分かってきました。

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

テンプレート リテラルは、使用するためにオブジェクト データを文字列に追加しました。 変数やオブジェクトを使って、文字列のデータを通知することができます。 中括弧の間のすべてが、数値から条件、関数まで評価されます。

Math:

let number = `${2 * 5}`;// output = 10

Ternary condition:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

すべてをまとめて、配列などの繰り返しコンテンツを処理する関数を構築することができます。