web-dev-qa-db-ja.com

ES2015 Babel文字列補間がアポストロフィで機能しない（ただし、二重引用符で機能する）

私はいくつかのES2015を学ぶためにbabel/gruntを使用しています。

この投稿 によると、Javascriptには一重引用符と二重引用符の間に実際の違いはありません。つまり、「テスト」と「テスト」です。

ただし、文字列補間を試みると、babeljs（またはおそらく-私）に問題があるようです。以下のコードの何が問題になっていますか？

このドキュメント によると、両方とも機能するはずです。 Chromeコンソールにエラーはありません。

ワーキングJs：

var name = "Bob", time = "today";
alert(`Hello ${name}, how are you ${time}?`);

トランスパイル：

var name = "Bob",
    time = "today";
alert("Hello " + name + ", how are you " + time + "?");

期待される結果を提供します。

失敗したJs：

var forename = 'bob', surname = 'test';
alert('hello ${forename} ${surname} - how are you?');

トランスパイル：

var forename = "bob",
    surname = "test";
alert("hello ${forename} ${surname} - how are you?");

そして、次の出力を提供します。

enter image description here

javascriptecmascript-6string-interpolationbabeljs
15
HockeyJ

そうです、stringsに関しては、'と"に違いはありませんが、文字列補間を行うには、mustテンプレート文字列の前後にバッククォートを使用します。例：

ES2015

var forename = 'bob', surname = 'test';
alert(`hello ${forename} ${surname} - how are you?`);

結果のES5

var forename = 'bob',
    surname = 'test';
alert('hello ' + forename + ' ' + surname + ' - how are you?');

Babel REPL

39
CodingIntrigue