☰

JavaScript で文字列内の変数を連結せずに補間するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript string variables string-interpolation
JavaScript で文字列内の変数を連結せずに補間するにはどうすればよいでしょうか? 質問する

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

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

出力："I pity the foo"

同じことが JavaScript でも可能かどうか気になっています。連結を使用せずに文字列内で変数を使用すると、より簡潔でエレガントに書けるように見えます。

ベストアンサー1

活用できるのはテンプレートリテラル次の構文を使用します:

`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.

おすすめ記事