3.1 Espressioni nidificate
Nei template literals puoi usare qualsiasi espressione, inclusi i function calls, operatori ternari e template literals all'interno di altri template literals.
Esempio:
Nell'espressione ${a + b} viene eseguita un'operazione matematica e il risultato viene inserito nella stringa 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 Template literals nidificati
I template literals possono essere nidificati, permettendo di creare stringhe complesse.
Esempio:
Il metodo greet() dell'oggetto user è nidificato nel 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 Template literals taggati (Tagged Templates)
I template literals taggati permettono di chiamare una funzione per elaborare le stringhe del template. Questo offre la possibilità di eseguire manipolazioni aggiuntive sulle stringhe, come l'internazionalizzazione, l'inserimento sicuro di HTML, ecc.
Sintassi:
function tag(strings, ...values) {
// elaborazione di strings e values
return risultato;
}
const result = tag`Stringa del template con ${variabile}`;
Esempio:
La funzione highlight() elabora strings e values, racchiudendo i valori in tag HTML <span> con classe 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 Inserimento sicuro di valori
I template literals aiutano ad evitare alcuni comuni problemi di sicurezza, come XSS (cross-site scripting), attraverso l'inserimento sicuro dei valori. Questo è particolarmente utile quando si inseriscono dati utente in HTML.
Esempio:
La funzione safeHTML() sostituisce i caratteri pericolosi nei valori, prevenendo attacchi 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