3.1 Verschachtelte Ausdrücke
In Template Literals kannst du alle Arten von Ausdrücken verwenden, einschließlich Funktionsaufrufe, ternäre Operatoren und Template Literals innerhalb von Template Literals.
Beispiel:
Im Ausdruck ${a + b} wird eine mathematische Operation ausgeführt und das Ergebnis in den String result eingefügt.
const a = 5;
const b = 10;
const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."
3.2 Verschachtelte Template Literals
Template Literals können verschachtelt werden, was es ermöglicht, komplexe Strings zu erstellen.
Beispiel:
Der Aufruf der Methode greet() des Objekts user ist in den Template Literal message eingebettet.
const user = {
name: 'Bob',
age: 25,
greet() {
return `Hello, ${this.name}!`;
}
};
const message = `${user.greet()} You are ${user.age} years old.`;
console.log(message); // "Hello, Bob! You are 25 years old."
3.3 Getaggte Template Literals
Getaggte Template Literals erlauben es, eine Funktion zur Verarbeitung von Template Strings aufzurufen. Dies bietet die Möglichkeit, zusätzliche Manipulationen mit den Strings durchzuführen, wie zum Beispiel Internationalisierung, sichere HTML-Einbindung usw.
Syntax:
function tag(strings, ...values) {
// Verarbeitung von Strings und Werten
return Ergebnis;
}
const result = tag`Template-String mit ${variable}`;
Beispiel:
Die Funktion highlight() verarbeitet Strings und Werte, indem sie Werte in HTML-Tags <span> mit der Klasse highlight einhüllt.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;
console.log(message);
// "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."
3.4 Sichere Wert-Einbindung
Template Literals helfen, einige häufige Sicherheitsprobleme wie XSS (Cross-Site Scripting) zu vermeiden, indem sie Werte sicher einbinden. Dies ist besonders nützlich beim Einfügen von Benutzerdaten in HTML.
Beispiel:
Die Funktion safeHTML() ersetzt gefährliche Zeichen in Werten, um XSS-Angriffe zu verhindern.
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;
console.log(message);
// "User input: <script>alert("XSS")</script>"
GO TO FULL VERSION