Pourquoi mes littéraux de modèle JavaScript ne remplacent-ils pas les variables ?

Dépannage des littéraux de modèles : résolution du problème de substitution de variables

Les littéraux de modèles, désignés par des guillemets droits () au lieu de guillemets droits, permettent aux développeurs d'intégrer expressions dans des chaînes. Cependant, vous pouvez rencontrer un problème où les littéraux de modèle tels que « some ${string} » ou « some ${string} »` ne parviennent pas à remplacer les noms de variables par leurs valeurs.

Cause :

Ce problème survient lorsque des guillemets droits (simples ou doubles) sont utilisés à la place de backticks.

Solution :

Pour résoudre ce problème, remplacez simplement les guillemets droits entourant le littéral du modèle par des backticks, comme ceci :

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

Explication :

Les littéraux de modèles JavaScript utilisent des backticks comme délimiteurs. Cette distinction les distingue des chaînes normales, qui utilisent des guillemets droits. En utilisant des backticks, vous demandez à JavaScript d'analyser et d'évaluer toutes les expressions intégrées dans le littéral du modèle, ce qui entraîne la substitution des valeurs de variable.

Exemple :

Considérez ce qui suit code :

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

Ce code affichera :

categoryName: name
categoryElements: element

En revanche, si vous avez utilisé des guillemets droits, le résultat apparaîtrait comme suit :

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

Cela illustre comment les guillemets droits traitent le modèle littéral comme une chaîne normale, conservant les noms de variables littéraux au lieu d'évaluer les expressions qu'il contient.

Référence :

• [Utilisation du caractère backtick () dans JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Template_literals#Usage_of_the_backtick_character_)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!