Maison >interface Web >js tutoriel >Comment différer l'évaluation des littéraux de modèles ES6 ?

Comment différer l'évaluation des littéraux de modèles ES6 ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-06 20:42:03513parcourir

How to Defer Evaluation of ES6 Template Literals?

Différer l'exécution des littéraux de modèles ES6

Les littéraux de modèles ES6 fournissent un sucre syntaxique puissant pour l'interpolation de chaînes, mais que se passe-t-il si vous souhaitez différer l'évaluation jusqu'après la création de l'élément dynamique ?

Le problème

Traditionnellement, l'utilisation de String.prototype.format permettrait une évaluation différée. Cependant, les littéraux de modèle sont évalués au moment de l'analyse, empêchant cette approche.

Solution 1 : utiliser des littéraux de modèle balisés

Les littéraux de modèle balisés vous permettent d'intercepter et de traiter le modèle. littéral avant évaluation :

function formatter(literals, ...substitutions) {
    return {
        format: function() {
            // ... code here ...
        }
    };
}
console.log(formatter`Hello, <pre class="brush:php;toolbar:false">String.prototype.format = function() {
    var args = arguments;
    return this.replace(/$\{p(\d)\}/g, function(match, id) {
        return args[id];
    });
};
console.log("Hello, ${p0}. This is a ${p1}".format("world", "test"));
. This is a `.format("world", "test"));

Solution 2 : utiliser des littéraux de chaîne simples

Vous pouvez également utiliser des littéraux de chaîne simples et analyser manuellement les substitutions :

const welcome = (p0, p1) => `Hello, ${p0}. This is a ${p1}`;
console.log(welcome("world", "test"));

Solution 3 : évitez les littéraux de modèle et utilisez les paramètres de fonction

Enfin, vous pouvez éviter complètement les littéraux de modèle et utiliser les paramètres de fonction :

Considérations

  • La solution 1 offre la plus grande flexibilité mais peut être trop complexe pour des cas d'utilisation simples.
  • La solution 2 est plus simple mais nécessite une analyse manuelle.
  • La solution 3 utilise une approche traditionnelle sans modèles littéraux.

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