Wie erstelle ich wiederverwendbare ES6-Vorlagenliterale für die dynamische Auswertung?

Wiederverwendbare ES6-Vorlagenliterale

Herausforderung:

Entwickler finden ES6-Vorlagenliterale oft für die String-Interpolation von unschätzbarem Wert. Es kommt jedoch häufig zu Frustrationen, wenn versucht wird, diese Literale zur Laufzeit wiederzuverwenden oder auszuwerten. Es scheint, als müssten die Ersetzungen immer zum Zeitpunkt der Deklaration erfolgen, was ihre Praktikabilität als Vorlagen einschränkt.

Lösung:

Um diese Einschränkung zu überwinden und wiederverwendbare Vorlagenliterale zu erstellen, die dies können Um dynamisch wiederverwendet und ausgewertet zu werden, müssen wir eine Zwischenstufe einführen.

Verwendung des Funktionskonstruktors:

Der Schlüssel zur Wiederverwendbarkeit liegt in der Verwendung des Funktionskonstruktors zum Umschließen der Vorlage Zeichenfolge. Dadurch wandeln wir die Vorlage im Wesentlichen in eine JavaScript-Funktion um, die später mit bestimmten Variablenwerten aufgerufen werden kann.

<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>

In diesem Beispiel verwendet die Funktion fillTemplate sowohl die Vorlagenzeichenfolge als auch ein Variablenobjekt als Argumente . Es verpackt die Vorlage in eine Funktion und gibt dann das Ergebnis des Aufrufs dieser Funktion mit den angegebenen Variablenwerten zurück. Dadurch können wir die Vorlage dynamisch auswerten und jedes Mal andere Variablenwerte einfügen.

Zusätzliche Überlegungen:

Diese Methode stellt zwar eine Problemumgehung für das Problem der Wiederverwendbarkeit dar, ist aber nicht möglich führt außerdem zu potenziellen Einschränkungen.

• Die Einbindung von Vorlagen-Tags wird schwieriger.
• Inline-JavaScript-Logik kann aufgrund der späten Interpolation nicht eingebunden werden.

Alternative Ansätze:

Einige ziehen es vielleicht vor, alternative Template-Engine-Bibliotheken zu erkunden, die eine umfassendere Lösung für wiederverwendbare und zur Laufzeit evaluierte Vorlagen bieten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich wiederverwendbare ES6-Vorlagenliterale für die dynamische Auswertung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!