Funzioni template con tag
Elabori le parti dei template con funzioni tag.
Funzioni template con tag è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Cos'è una funzione tag
Un template taggato è una chiamata di funzione in cui il nome della funzione viene posto direttamente prima di un template literal. La funzione riceve le parti analizzate del template e può trasformarle.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))L'array delle stringhe
Il primo argomento ricevuto da una funzione tag è un array delle parti di stringa letterali. Si tratta dei frammenti di testo che si trovano tra i segnaposto e ai loro lati.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))I valori
Dopo l'array delle stringhe, la funzione tag riceve ogni valore interpolato come argomento separato. L'uso dei parametri rest li raccoglie in un array.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Ricomporre la stringa
Una funzione tag tipica percorre l'array delle stringhe e inserisce ogni valore tra le parti, ricostruendo la stringa finale con la trasformazione desiderata.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))Regola sulla lunghezza dell'array delle stringhe
L'array delle stringhe contiene sempre un elemento in più rispetto all'array dei valori. È presente testo prima del primo segnaposto e dopo l'ultimo, anche se alcune parti sono vuote.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Trasformare i valori
Poiché la funzione tag controlla il modo in cui vengono inseriti i valori, è possibile formattarli. Qui ogni valore numerico viene raddoppiato prima dell'inserimento.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))Restituire valori non stringa
Una funzione tag non deve necessariamente restituire una stringa. Può restituire qualsiasi valore, ad esempio un oggetto o un array costruito a partire dalle parti del template.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])Proprietà raw
L'array delle stringhe contiene anche una proprietà raw, che conserva le stringhe senza elaborare le sequenze di escape. È così che funziona String.raw.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Conversione in maiuscolo delle interpolazioni
Un tag dimostrativo comune converte in maiuscolo ogni valore interpolato, lasciando invariato il testo statico.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))Perché usare i tag
Le funzioni tag consentono di adottare schemi potenti: fare l'escaping di input non attendibili, gestire l'internazionalizzazione, costruire query SQL o di altro tipo e applicare formattazioni personalizzate, il tutto guidato dalla struttura del template.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))Ignorare i valori
Un tag può scegliere di ignorare completamente i valori interpolati e produrre un output basato solo sulle parti statiche, una soluzione utile per l'analisi o il logging.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Verifica rapida
Verifichi la Sua conoscenza delle funzioni tag.
Riepilogo
Riepilogo: i template taggati chiamano una funzione con le parti del template analizzate.
- Il primo argomento è l'array strings
- Gli argomenti rimanenti sono i valori interpolati
- strings contiene un elemento in più rispetto a values
- La proprietà raw contiene il testo non elaborato
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))Domande Frequenti
La lezione «Funzioni template con tag» è gratuita?
Sì — il testo completo di «Funzioni 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 «Funzioni template con tag»?
Elabori le parti dei template con funzioni 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 3 di 4.
Quanto tempo richiede la lezione «Funzioni 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
- Nozioni di base sull'interpolazione di stringhe
- Stringhe multilinea
- Funzioni template con tag
- Casi d'uso pratici dei template con tag