Maison > interface Web > js tutoriel > Pourquoi mes littéraux de modèle JavaScript ne remplacent-ils pas les variables ?

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

DDD
Libérer: 2024-12-06 22:21:12
original
790 Les gens l'ont consulté

Why Aren't My JavaScript Template Literals Substituting 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} `)
Copier après la connexion

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} `)
Copier après la connexion

Ce code affichera :

categoryName: name
categoryElements: element
Copier après la connexion

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

${this.categoryName}
categoryElements: ${this.categoryElements}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal