Les littéraux de modèles : ressusciter la réutilisation

Les littéraux de modèles dans ES6 sont souvent présentés comme de puissants outils de manipulation de texte, mais une question lancinante persiste : peuvent-ils vraiment être réutilisés ?

Attentes insatisfaisantes

À première vue, les littéraux de modèles semblent promettre des substitutions dynamiques uniquement au moment de la déclaration. Cela soulève la question : qu'est-ce qu'un modèle qui reste statique ?

Briser le cycle

Contrairement à la croyance populaire, les littéraux de modèles peuvent être revigorés avec des substitutions d'exécution à l'aide de la fonction constructeur comme intermédiaire :

const template = "Hello ${this.name}!";
const variables = {
  name: "world"
};
function fillTemplate(str, data) {
  return new Function("return `"   str   "`;").call(data);
}
console.log(fillTemplate(template, variables)); // Output: Hello world!

Anatomie d'un modèle réutilisable

Cette technique permet les opérations suivantes :

• Runtime interpolation : Les variables sont renseignées dynamiquement, comme dans les moteurs de modèles traditionnels.
• Fragmentation : Les modèles peuvent être stockés dans des fichiers séparés ou obtenus dynamiquement.
• Création dynamique : Les modèles peuvent être construits et évalués à la volée.

Réponse aux mises en garde

Bien que cette méthode offre des fonctionnalités ressuscitées, il existe certaines mises en garde :

• JavaScript limité : La logique JavaScript en ligne n'est pas possible en raison d'une interpolation tardive.
• Balises de modèle : Les balises de modèle deviennent difficiles à mettre en œuvre.

Malgré ces limitations, il est clair qu'avec un peu d'ingéniosité, les modèles littéraux peuvent transcender leurs limites conventionnelles et devenir véritablement réutilisables.