Maison > interface Web > js tutoriel > Comment créer des littéraux de modèles ES6 réutilisables pour une évaluation dynamique ?

Comment créer des littéraux de modèles ES6 réutilisables pour une évaluation dynamique ?

DDD
Libérer: 2024-10-30 16:04:00
original
381 Les gens l'ont consulté

How to Create Reusable ES6 Template Literals for Dynamic Evaluation?

Littéraux de modèles ES6 réutilisables

Défi :

Les développeurs trouvent souvent les littéraux de modèles ES6 inestimables pour l'interpolation de chaînes. Cependant, une frustration courante survient lorsque l'on tente de réutiliser ou d'évaluer ces littéraux au moment de l'exécution. Il semble que les substitutions doivent toujours être effectuées au moment de la déclaration, ce qui limite leur caractère pratique en tant que modèles.

Solution :

Pour surmonter cette limitation et créer des littéraux de modèles réutilisables qui peuvent être réutilisé et évalué dynamiquement, nous devons introduire une étape intermédiaire.

Utilisation du constructeur de fonction :

La clé de la réutilisabilité réside dans l'utilisation du constructeur de fonction pour envelopper le modèle chaîne. Ce faisant, nous transformons essentiellement le modèle en une fonction JavaScript qui peut être invoquée ultérieurement avec des valeurs de variable spécifiques.

<code class="js">const templateString = "Hello ${this.name}!";
const templateVars = {
    name: "world"
};

const fillTemplate = function (templateString, templateVars) {
    return new Function("return `" + templateString + "`;").call(templateVars);
};

console.log(fillTemplate(templateString, templateVars)); // Output: "Hello world!"</code>
Copier après la connexion

Dans cet exemple, la fonction fillTemplate prend à la fois la chaîne du modèle et un objet variable comme arguments. . Il enveloppe le modèle dans une fonction, puis renvoie le résultat de l'appel de cette fonction avec les valeurs de variable données. Cela nous permet d'évaluer le modèle de manière dynamique, en insérant différentes valeurs de variable à chaque fois.

Considérations supplémentaires :

Bien que cette méthode fournisse une solution de contournement au problème de réutilisabilité, elle introduit également des limitations potentielles.

  • Les balises de modèle deviennent plus difficiles à intégrer.
  • La logique JavaScript en ligne ne peut pas être incluse en raison d'une interpolation tardive.

Approches alternatives :

Certains préféreront peut-être explorer des bibliothèques de moteurs de modèles alternatives qui fournissent une solution plus complète pour les modèles réutilisables et évalués au moment de l'exécution.

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