JavaScript Academy · leksjon

Praktiske bruksområder for taggede templates

Bygg trygg HTML og stylede strenger med tags.

Leksjon 4 av 413 trinn

Praktiske bruksområder for taggede templates er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Tagger i praksis

Taggede malstrenger brukes i mange biblioteker: HTML-escaping, styled components, GraphQL-spørringer og i18n. Den felles ideen er å fange opp interpolerte verdier for å behandle dem på en trygg måte.

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

Problemet med escaping

Når De bygger HTML fra brukerinndata, kan spesialtegn som mindre enn-tegnet injisere markup. En tag-funksjon kan automatisk escape disse tegnene, men bare i de interpolerte verdiene.

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

En escape-hjelpefunksjon

Først definerer vi en hjelpefunksjon som erstatter farlige tegn med trygge HTML-entiteter.

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

Trygg HTML-tag

Nå bygger vi en tag som escaper alle interpolerte verdier, men lar de statiske maldelene være som de er, siden de kommer fra den pålitelige utvikleren.

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>"))

Hvorfor statiske deler forblir rå

Det er bare de interpolerte verdiene som er upålitelige brukerdata. De bokstavelige maldelene er skrevet av utvikleren, så de forblir uescapet slik at den tiltenkte markuppen fungerer.

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 for formatert utskrift

Et annet mønster omslutter interpolerte verdier med formateringsmarkører, for eksempel for å fremheve tall i en rapport.

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))

Bygge spørringsstrenger

Tagger kan kode verdier for URL-er ved å escape hver interpolerte del, slik at den statiske strukturen forblir intakt mens dataene kodes trygt.

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"))

Flertallsbøying

En tag kan undersøke en verdi og tilpasse teksten rundt den, for eksempel ved å velge entalls- eller flertallsform.

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))

Fjerne innrykk

Tagger kan rydde opp i maler over flere linjer ved å fjerne innledende innrykk fra hver linje, slik at resultatet blir ryddig.

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

Kombinere tagger

De kan legge flere typer funksjonalitet oppå hverandre ved å la én tag kalle hjelpefunksjoner. Her omslutter taggen verdiene og fremhever dem.

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"))

Når De ikke bør bruke tagger

For enkle strenger er en vanlig template literal tilstrekkelig. Bruk en tag-funksjon bare når De trenger en konsekvent transformasjon av interpolerte verdier, for eksempel escaping eller lokalisering.

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

Kort kontroll

Test den praktiske kunnskapen Deres om tagger.

Besvar den i den interaktive leksjonen

Oppsummering

Oppsummering: Taggede malstrenger muliggjør trygge, formaterte resultater.

Escape bare interpolerte verdier for HTML-sikkerhet
Statiske deler forblir pålitelige og rå
Bruk tagger til styling, koding og flertallsbøying
Foretrekk vanlige litteraler når ingen transformasjon er nødvendig

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Praktiske bruksområder for taggede templates» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Praktiske bruksområder for taggede templates», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Praktiske bruksområder for taggede templates»?

Bygg trygg HTML og stylede strenger med tags. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Praktiske bruksområder for taggede templates»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Grunnleggende strenginterpolasjon
Strenger over flere linjer
Taggede template-funksjoner
Praktiske bruksområder for taggede templates

← Tilbake til JavaScript Academy