[解決済み] JavaScriptで文字列中の変数を連結せずに補間する方法は？

質問

PHPでこのようなことができるのは知っています。

$hello = "foo";
$my_string = "I pity the $hello";

出力します。 "I pity the foo"

これと同じことがJavaScriptでも可能なのか、と。連結を使わずに文字列の中で変数を使う - その方が簡潔に書けてエレガントそうです。

どのように解決するのですか？

を活用することができます。 テンプレート・リテラル という構文があり、これを利用します。

`String text ${expression}`

テンプレート・リテラルは バックチック (` `) (グレイヴ・アクセント)の代わりに使用します。

この機能はES2015(ES6)で導入されました。

例

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

なんてすてきなんでしょう。

ボーナスです。

また、javascriptでエスケープせずに複数行の文字列を扱えるので、テンプレートにも最適です。

return `
    <div class="${foo}">
         ...
    </div>
`;

ブラウザ対応 :

この構文は、古いブラウザ（主に Internet Explorer）ではサポートされていないので バベル /Webpack を使用してコードを ES5 にトランスパイルし、どこでも動作するようにします。

余談ですが

IE8+ からは、基本的な文字列の書式設定ができます。 console.log :

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.