0Pricing
JavaScript Academy · Lezione

Casi d'uso pratici dei template con tag

Crei HTML sicuro e stringhe stilizzate con i tag.

Casi d'uso pratici dei template con tag è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Tag nel mondo reale

I template taggati sono alla base di molte librerie: escaping HTML, styled components, query GraphQL e i18n. L'idea comune è intercettare i valori interpolati per elaborarli in modo sicuro.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Il problema dell'escaping

Quando costruisce HTML a partire da input dell'utente, caratteri speciali come il segno minore di possono iniettare markup. Una funzione tag può fare automaticamente l'escaping di questi caratteri solo nei valori interpolati.

const danger = "<script>"
console.log("raw: " + danger)

Un helper per l'escaping

Per prima cosa definiamo un helper che sostituisce i caratteri pericolosi con entità HTML sicure.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Tag HTML sicuro

Ora costruiamo un tag che applica l'escaping a ogni valore interpolato, ma lascia inalterate le parti statiche del template, poiché provengono dallo sviluppatore e sono attendibili.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Perché le parti statiche restano grezze

Solo i valori interpolati sono dati non attendibili forniti dall'utente. Le parti letterali del template sono scritte dallo sviluppatore, quindi non subiscono l'escaping, così il markup previsto continua a funzionare.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Tag per l'output formattato

Un altro schema racchiude i valori interpolati tra marcatori di formattazione, ad esempio per evidenziare i numeri in un report.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Costruire stringhe di query

I tag possono codificare i valori per gli URL, facendo l'escaping di ogni parte interpolata in modo che la struttura statica rimanga intatta e i dati vengano codificati in modo sicuro.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Pluralizzazione

Un tag può analizzare un valore e modificare il testo circostante, ad esempio scegliendo la forma singolare o plurale.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Rimuovere il rientro

I tag possono ripulire i template su più righe rimuovendo il rientro iniziale da ogni riga e producendo un output ordinato.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Comporre i tag

È possibile combinare più comportamenti facendo chiamare a un tag alcuni helper. In questo caso il tag racchiude i valori e li mette in evidenza.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Quando non usare i tag

Per le stringhe semplici è sufficiente un normale literal di template. Ricorra a una funzione tag solo quando deve trasformare in modo coerente i valori interpolati, ad esempio per l'escaping o la localizzazione.

const name = "Lee"
console.log("Welcome, " + name)

Verifica rapida

Verifichi la Sua conoscenza pratica dei tag.

Riepilogo

Riepilogo: i template taggati consentono di produrre output sicuri e formattati.

  • Faccia l'escaping solo dei valori interpolati per garantire la sicurezza dell'HTML
  • Le parti statiche restano attendibili e non elaborate
  • Utilizzi i tag per applicare stili, codificare valori e gestire la pluralizzazione
  • Preferisca i literal semplici quando non è necessaria alcuna trasformazione
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Domande Frequenti

La lezione «Casi d'uso pratici dei template con tag» è gratuita?

Sì — il testo completo di «Casi d'uso pratici dei template con tag» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Casi d'uso pratici dei template con tag»?

Crei HTML sicuro e stringhe stilizzate con i tag. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Casi d'uso pratici dei template con tag»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Nozioni di base sull'interpolazione di stringhe
  2. Stringhe multilinea
  3. Funzioni template con tag
  4. Casi d'uso pratici dei template con tag
← Torna a JavaScript Academy