Maison >interface Web >js tutoriel >Pourquoi les littéraux de mon modèle JavaScript affichent-ils les noms de variables au lieu des valeurs ?

Pourquoi les littéraux de mon modèle JavaScript affichent-ils les noms de variables au lieu des valeurs ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-08 05:56:09243parcourir

Why Do My JavaScript Template Literals Display Variable Names Instead of Values?

Modèles littéraux en JavaScript : backticks requis

Les modèles littéraux en JavaScript, désignés par des espaces réservés ${} dans les chaînes, offrent un moyen pratique de intégrer des expressions. Cependant, rencontrer des problèmes d'affichage avec les littéraux de modèles utilisant des guillemets simples (') au lieu de guillemets (`) est un oubli courant.

Description du problème

Lors de l'utilisation de guillemets simples, les noms littéraux des variables sont imprimés à la place de leurs valeurs. Par exemple :

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

Sortie :

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

Solution

Les littéraux de modèle JavaScript nécessitent des backticks, pas directement guillemets.

Les backticks sont les caractères à côté du Touche « 1 » sur un clavier QWERTY. Leur utilisation au lieu de guillemets simples crée un modèle littéral, qui peut ensuite héberger des espaces réservés ${} pour évaluer les expressions :

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

Sortie :

categoryName: name 
categoryElements: element

Informations supplémentaires

Les backticks sont fréquemment utilisés dans divers langages de programmation, mais peuvent être nouveaux pour les développeurs JavaScript. Reportez-vous à la ressource suivante pour plus de détails :

  • [Utilisation du caractère Backtick en JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ template_literals)

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!

Déclaration:
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