Maison > interface Web > js tutoriel > Les littéraux des modèles ES6 peuvent-ils être réutilisables au moment de l'exécution ?

Les littéraux des modèles ES6 peuvent-ils être réutilisables au moment de l'exécution ?

Linda Hamilton
Libérer: 2024-11-02 17:49:02
original
603 Les gens l'ont consulté

Can ES6 Template Literals Be Reusable at Runtime?

Démystifier les limites des littéraux de modèles ES6 : parvenir à la réutilisabilité au moment de l'exécution

Bien que les littéraux de modèles ES6 offrent des capacités améliorées de manipulation de chaînes, une idée fausse courante est qu'ils sont immuables et ne peuvent pas être réutilisés ou remplacés dynamiquement au moment de l’exécution. Cependant, avec une approche intelligente impliquant le constructeur Function, il est possible de créer des littéraux de modèles réutilisables qui peuvent être évalués et interpolés à la volée.

Les littéraux de modèles réutilisables démystifiés

La clé du modèle réutilisable les littéraux consiste à les traiter comme une forme intermédiaire. En convertissant la chaîne de modèle en un objet Function, nous créons effectivement une fonction de modèle qui peut être invoquée avec des données dynamiques pour générer la chaîne finale.

<code class="javascript">const templateString = `\`This is
my ${expletive} reusable
template!\``;

const templateFunction = new Function(`return \`${templateString}\``);

let expletive = 'curious';
console.log(templateFunction.call({ expletive }));</code>
Copier après la connexion

Cela nous permet de remplacer la valeur de la variable d'explétif à runtime, rendant efficacement le modèle réutilisable et dynamique.

Amélioration de la réutilisabilité avec une fonction d'assistance

Pour simplifier davantage le processus, nous pouvons introduire une fonction d'assistance qui automatise la conversion d'une chaîne de modèle en un fonction de modèle réutilisable :

<code class="javascript">function reusableTemplate(templateString) {
  return `return \`${templateString.replace('{','$${')}\``;
}

const template = reusableTemplate(`This is
my {expletive} reusable
template!`);

console.log(new Function(template)({ expletive: 'AMAZING' }));</code>
Copier après la connexion

Cette fonction d'assistance facilite la définition et l'utilisation de modèles réutilisables avec des substitutions dynamiques.

Avantages et limitations

Les littéraux de modèles réutilisables offrent plusieurs avantages :

  • Interpolation de données dynamiques au moment de l'exécution
  • Facilite la réutilisation des modèles dans différentes parties de la base de code
  • Favorise la clarté et la maintenabilité du code
  • Prend en charge les fonctionnalités avancées fonctionnalités de modèles telles que les balises de modèle

Cependant, elles comportent également certaines limitations :

  • Les balises de modèle nécessitent des considérations supplémentaires lors de l'utilisation de modèles basés sur des fonctions
  • En ligne La logique JavaScript n'est pas prise en charge en raison d'une interpolation tardive.

Dans l'ensemble, les littéraux des modèles ES6, lorsqu'ils sont étendus avec le constructeur Function, débloquent un nouveau niveau de polyvalence et de réutilisabilité, démontrant qu'il ne s'agit pas simplement de chaînes statiques, mais plutôt de chaînes statiques. des outils puissants pour la manipulation dynamique de chaînes et la génération de modèles.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal