ES6（ECMAScript 6）のテンプレートリテラルがJavaScriptで動かない原因と対処法

JavaScriptでテンプレートリテラルが正しく動作しない場合、最もよくある原因は引用符の種類の間違いです。テンプレートリテラルを使用するには、シングルクォート（' '）やダブルクォート（" "）ではなく、バッククォート（` `）で文字列を囲む必要があります。

バッククォートは、キーボードの左上（数字の「1」の左側）にある「`」キーです。見た目がシングルクォートと似ているため、うっかり混同してしまうケースが非常に多いのです。

コード例

以下に、テンプレートリテラルを使ったサンプルコードを示します。

var firstName="John";
var lastName="Smith";
console.log(`First Name is= ${firstName}\nLast Name is= ${lastName} `);

このようにバッククォート内では ${変数名} の形式で変数を埋め込めるほか、「\n」による改行もそのまま反映されます。

プログラムの実行方法

上記のプログラムを実行するには、ターミナルまたはコマンドプロンプトで以下のコマンドを入力します。

node fileName.js

ここでは、ファイル名を demo320.js として保存しています。

実行結果

プログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo320.js
First Name is= John
Last Name is= Smith

まとめ

テンプレートリテラルが機能しないときは、まず文字列がバッククォート（`）で囲まれているかを確認しましょう。シングルクォートで囲んだ状態で ${} を使っても、それは単なる文字列として出力されるだけで、変数の値は展開されません。ES6以降の環境（Node.js や最新ブラウザ）であれば、バッククォートさえ正しく使えば問題なく動作します。