JavaScript テンプレート リテラルが機能しない

一部の ${string} や「一部の ${string}」などの JavaScript テンプレート リテラルを利用しようとすると、問題が発生する可能性がありますここでは、値ではなくリテラル変数名が表示されます。この問題は、特定のブラウザのバージョンや jQuery などの開発フレームワークに限定されません。

解決策: バッククォートの使用

この問題を修正するには、従来の単一のバッククォート (`) の代わりにバッククォート (`) を使用することが重要です。または二重引用符。一般に「グレーブ アクセント」と呼ばれるバックティックは、標準的な QWERTY キーボードの数字の 1 キーの隣にあります。

例:

// Incorrect approach
console.log('categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} ');

// Correct approach using backticks
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} `);

バックティックを使用すると、テンプレート リテラルを正しく呼び出し、必要な変数値を表示できます。