3.1 Zagnieżdżone wyrażenia
W Template Literals możesz używać dowolnych wyrażeń, w tym wywołań funkcji, operatorów warunkowych i Template Literals wewnątrz innych Template Literals.
Przykład:
W wyrażeniu ${a + b} wykonywana jest operacja matematyczna, a wynik jest wstawiany do ciągu result.
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 Zagnieżdżone Template Literals
Template Literals mogą być zagnieżdżone, co pozwala tworzyć skomplikowane ciągi tekstowe.
Przykład:
Wywołanie metody greet() obiektu user jest zagnieżdżone w Template Literal message.
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 Templaty oznaczone (Tagged Templates)
Templaty oznaczone pozwalają wywołać funkcję do przetwarzania ciągów szablonowych. Dzięki temu można wykonywać dodatkowe manipulacje na ciągach, takie jak internacjonalizacja, bezpieczne wstawianie HTML itp.
Składnia:
function tag(strings, ...values) {
// przetwarzanie ciągów i wartości
return rezultat;
}
const result = tag`Szablonowa linia z ${zmienna}`;
Przykład:
Funkcja highlight() przetwarza ciągi i wartości, opakowując wartości w znaczniki HTML <span> z klasą highlight.
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 Bezpieczne wstawianie wartości
Template Literals pomagają unikać niektórych powszechnych problemów z bezpieczeństwem, takich jak XSS (Cross-Site Scripting), poprzez bezpieczne wstawianie wartości. To szczególnie przydatne przy wstawianiu danych użytkownika w HTML.
Przykład:
Funkcja safeHTML() zastępuje niebezpieczne znaki w wartościach, zapobiegając atakom XSS.
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