JavaScript テンプレート リテラルが変数を置換しないのはなぜですか?

テンプレート リテラルのトラブルシューティング: 変数置換の問題の解決

直線引用符ではなくバックティック () で示されるテンプレート リテラルを使用すると、開発者は文字列内の式。ただし、「some ${string}」や「some ${string}」などのテンプレート リテラルが変数名をその値に置き換えることができないという問題が発生する可能性があります。

原因:

この問題は、引用符の代わりに直線引用符 (一重または二重) が使用されている場合に発生します。 backticks.

解決策:

この問題を解決するには、次のように、テンプレート リテラルを囲む直線引用符をバッククォーテーションに置き換えます。

console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} `)

説明:

JavaScript テンプレート リテラルバッククォートを区切り文字として利用します。この区別により、これらは直線引用符を使用する通常の文字列とは区別されます。バッククォートを使用すると、テンプレート リテラル内に埋め込まれた式を解析して評価するように JavaScript に指示し、その結果変数値が置換されます。

例:

次のことを考えてみましょう。コード:

categoryName="name";
categoryElements="element";
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${categoryElements} `)

このコードは出力:

categoryName: name
categoryElements: element

対照的に、直線引用符を使用した場合、出力は次のようになります:

${this.categoryName}
categoryElements: ${this.categoryElements}

これは、直線引用符がテンプレート リテラルを通常のリテラルとしてどのように扱うかを示しています。文字列。式を評価する代わりにリテラル変数名を保持します。

参照:

• [バックティック文字 () の使用法] JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Template_literals#Usage_of_the_backtick_character_)

以上がJavaScript テンプレート リテラルが変数を置換しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。