JavaScript - Tagged Templates

Hallo, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der Tagged Templates. Keine Sorge, wenn Sie noch nie von ihnen gehört haben – bis zum Ende dieser Lektion werden Sie Templates wie ein Profi taggen!

Was sind Tagged Templates?

Tagged Templates sind eine leistungsstarke Funktion, die in ES6 (ECMAScript 2015) eingeführt wurde und es Ihnen ermöglicht, Template-Literals mit einer Funktion zu analysieren. Jetzt weiß ich, dass das vielleicht ein bisschen einschüchternd klingen mag, aber denken Sie daran, dass es so ist, als würde man Ihren Template-Strings Superkräfte verleihen!

In einfacheren Worten erlauben Tagged Templates, dass Sie eine Template-String bearbeiten, bevor er最终 dargestellt wird. Es ist, als hätten Sie einen persönlichen Assistenten, der Ihre Nachrichten vor dem Absenden bearbeiten kann.

Grundlegende Syntax

Lassen Sie uns mit der grundlegenden Syntax beginnen:

function myTag(strings, ...values) {
// Hier geht Ihre Magie los
}

const result = myTag`Hello, ${name}!`;

In diesem Beispiel ist myTag unsere Template-Tag-Funktion. Sie empfängt zwei Arten von Argumenten:

1. Ein Array von String-Literals
2. Die interpolierten Werte (die innerhalb von ${})

Warum sollte man Tagged Templates verwenden?

Vielleicht fragen Sie sich, "Warum sollte ich mir die Mühe mit Tagged Templates machen?" Nun, lassen Sie mich Ihnen eine kleine Geschichte erzählen.

Es war einmal ein junger Entwickler namens Alex. Alex baute eine Nachrichten-App und wollte sicherstellen, dass niemand schädliches HTML in seine Nachrichten senden konnte. Tagged Templates kamen zur Rettung! Alex verwendete sie, um Benutzer-Eingaben zu bereinigen und potenzielle Sicherheitsrisiken zu verhindern.

Tagged Templates sind super nützlich für:

• Bereinigung von Benutzer-Eingaben
• Internationalisierung (i18n)
• Styling (wie in styled-components für React)
• Und vieles mehr!

Beispiele für Tagged Templates

Lassen Sie uns in einige Beispiele eintauchen, um Tagged Templates in Aktion zu sehen!

Beispiel 1: Eine einfache Begrüßung

function greet(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// Ausgabe: Hello, ALICE!

In diesem Beispiel nimmt unsere greet-Funktion den Namen und konvertiert ihn in Großbuchstaben. Das strings-Array enthält ["Hello, ", "!"], und das values-Array enthält ["alice"].

Beispiel 2: HTML-Escape

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (values[i] ? escapeHtml(values[i]) : '');
}, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// Ausgabe: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

Dieses Beispiel zeigt, wie wir Tagged Templates verwenden können, um potenziell schädliches HTML zu escapen. Unsere safeHtml-Funktion ersetzt besondere Zeichen durch ihre HTML-Entity-Äquivalente.

Beispiel 3: Styling mit Tagged Templates

function css(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] || '');
}, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
color: ${color};
font-size: ${fontSize};
`;

console.log(styles);
// Ausgabe:
//   color: red;
//   font-size: 20px;

Dieses Beispiel zeigt, wie Tagged Templates für das Styling verwendet werden können, ähnlich wie in Bibliotheken wie styled-components.

Erweiterte Verwendung: Tagged Template-Methoden

Tagged Templates können auch Methoden haben, die an sie angehängt sind. Sehen wir uns ein Beispiel an:

function currency(strings, ...values) {
const result = strings.reduce((acc, str, i) => {
return acc + str + (values[i] || '');
}, '');

return {
toString() {
return result;
},
USD() {
return '$' + result;
},
EUR() {
return '€' + result;
}
};
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // Ausgabe: 100
console.log(formatted.USD()); // Ausgabe: $100
console.log(formatted.EUR()); // Ausgabe: €100

In diesem Beispiel gibt unsere currency-Marke ein Objekt mit Methoden zurück, die flexible Formatierungsoptionen ermöglichen.

Fazit

Tagged Templates sind eine leistungsstarke Funktion in JavaScript, die komplexe String-Manipulation und -Verarbeitung ermöglicht. Sie sind nicht nur eine schicke Möglichkeit, Strings zusammenzufügen – sie eröffnen eine Welt der Möglichkeiten für die Erstellung sichererer, flexiblerer und ausdrucksstärkerer Code.

Denken Sie daran, dass Tagged Templates wie jedes leistungsstarke Werkzeug maßvoll eingesetzt werden sollten. Sie sind großartig für spezifische Anwendungsfälle wie Bereinigung, Internationalisierung oder die Erstellung domänenspezifischer Sprachen, aber für einfache String-Interpolation sind reguläre Template-Literals oft ausreichend.

Jetzt, wo Sie über Tagged Templates Bescheid wissen, warum nicht selbst welche erstellen? Fangen Sie klein an, vielleicht mit einer einfachen Formatierungsfunktion, und arbeiten Sie sich schrittweise zu komplexeren Anwendungsfällen vor. Viel Spaß beim Coden, zukünftige JavaScript-Meister!

Credits: Image by storyset