JavaScript - Tagliati Template

Ciao, futuri maghi di JavaScript! Oggi ci imbarcheremo in un viaggio emozionante nel mondo dei Tagliati Template. Non preoccupatevi se non avete mai sentito parlare di loro prima - alla fine di questa lezione, taglierete i template come un professionista!

Cos'è un Tagliati Template?

I tagliati template sono una funzionalità potente introdotta in ES6 (ECMAScript 2015) che permette di analizzare stringhe template con una funzione. Ora, so che potrebbe sembrare un po' spaventoso, ma pensate a questo come dare superpoteri alle vostre stringhe template!

In termini più semplici, i tagliati template vi permettono di processare una stringa template prima che venga finalmente visualizzata. È come avere un assistente personale che può modificare i vostri messaggi prima che li inviate.

Sintassi di Base

Iniziamo con la sintassi di base:

function myTag(strings, ...values) {
// La vostra magia va qui
}

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

In questo esempio, myTag è la nostra funzione di tag template. Riceve due tipi di argomenti:

1. Un array di stringhe letterali
2. I valori interpolati (quelli dentro ${})

Perché Usare i Tagliati Template?

Magari vi state chiedendo, "Perché dovrei preoccuparmi dei tagliati template?" Beh, lasciatemi raccontare una piccola storia.

C'era una volta un giovane sviluppatore di nome Alex. Alex stava costruendo un'app di messaggistica e voleva essere sicuro che nessuno potesse inviare HTML dannoso nei loro messaggi. I tagliati template sono venuti in soccorso! Alex li ha utilizzati per sanificare l'input degli utenti e prevenire potenziali rischi di sicurezza.

I tagliati template sono estremamente utili per:

• Sanificare l'input degli utenti
• Internationalizzazione (i18n)
• Stile (come in styled-components per React)
• E molto altro!

Esempi di Tagliati Template

Immergiamoci in alcuni esempi per vedere i tagliati template in azione!

Esempio 1: Un Saluto Semplice

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

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

In questo esempio, la nostra funzione greet prende il nome e lo converte in maiuscolo. L'array strings contiene ["Ciao, ", "!"], e l'array values contiene ["alice"].

Esempio 2: Escape HTML

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`Input utente: ${userInput}`);
// Output: Input utente: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

Questo esempio mostra come possiamo utilizzare i tagliati template per escapare HTML potenzialmente dannoso. La nostra funzione safeHtml sostituisce i caratteri speciali con i loro equivalenti HTML.

Esempio 3: Stile con Tagliati Template

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

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

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

console.log(styles);
// Output:
//   color: rosso;
//   font-size: 20px;

Questo esempio dimostra come i tagliati template possono essere utilizzati per lo stile, simili a come vengono utilizzati nelle librerie come styled-components.

Uso Avanzato: Metodi dei Tagliati Template

I tagliati template possono anche avere metodi associati a loro. Guardiamo un esempio:

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()); // Output: 100
console.log(formatted.USD()); // Output: $100
console.log(formatted.EUR()); // Output: €100

In questo esempio, il nostro tag currency restituisce un oggetto con metodi, permettendo opzioni di formattazione flessibili.

Conclusione

I tagliati template sono una funzionalità potente in JavaScript che permette la manipolazione e il processo complesso delle stringhe. Non sono solo un modo fantasioso per concatenare stringhe - aprono un mondo di possibilità per creare codice più sicuro, flessibile ed espressivo.

Ricordate, come ogni strumento potente, i tagliati template dovrebbero essere usati con saggezza. Sono fantastici per casi specifici come la sanificazione, l'internationalizzazione o la creazione di linguaggi specifici del dominio, ma per interpolazioni di stringhe semplici, le stringhe template regolari sono spesso sufficienti.

Ora che avete imparato sui tagliati template, perché non provare a crearne voi stessi? Iniziate piccolo, magari con una funzione di formattazione semplice, e gradualmente lavorate verso casi d'uso più complessi. Buon coding, futuri maestri di JavaScript!

Metodo	Descrizione
strings.raw	Permette di accedere alle stringhe grezze nei template literals
String.raw	Una funzione di tag built-in per ottenere la forma di stringa grezza dei template literals

Credits: Image by storyset