PricingLoginStart free
JavaScript Academy · Les

Praktische toepassingen van getagde templates

Bouw veilige HTML en gestileerde strings met tags.

Les 4 van 413 stappen

Praktische toepassingen van getagde templates is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Tags uit de praktijk

Getagde templates vormen de basis van veel bibliotheken: HTML-escapen, styled components, GraphQL-query's en i18n. Het gedeelde idee is dat geïnterpoleerde waarden worden onderschept om ze veilig te verwerken.

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

Het probleem van escapen

Wanneer je HTML opbouwt uit gebruikersinvoer, kunnen speciale tekens zoals het kleiner-danteken opmaakcode invoegen. Een tagfunctie kan deze tekens automatisch escapen, maar alleen in de geïnterpoleerde waarden.

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

Een escapehelper

Eerst definiëren we een helper die gevaarlijke tekens vervangt door veilige HTML-entiteiten.

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

Veilige HTML-tag

Nu bouwen we een tag die elke geïnterpoleerde waarde escapt, maar de statische templatedelen ongewijzigd laat, omdat die van de vertrouwde ontwikkelaar komen.

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

Waarom statische delen onbewerkt blijven

Alleen de geïnterpoleerde waarden zijn niet-vertrouwde gebruikersgegevens. De letterlijke templatedelen zijn door de ontwikkelaar geschreven en blijven daarom ongescapt, zodat de bedoelde opmaak blijft werken.

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 voor opgemaakte uitvoer

Een ander patroon wikkelt geïnterpoleerde waarden in opmaakmarkeringen, bijvoorbeeld om getallen in een rapport te benadrukken.

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

Querystrings opbouwen

Tags kunnen waarden coderen voor URL's en elk geïnterpoleerd deel escapen, zodat de statische structuur intact blijft terwijl de gegevens veilig worden gecodeerd.

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

Meervoudsvormen

Een tag kan een waarde inspecteren en de omringende tekst aanpassen, bijvoorbeeld door een enkelvouds- of meervoudsvorm te kiezen.

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

Inspringing verwijderen

Tags kunnen templates met meerdere regels opruimen door de voorloopinspringing van elke regel te verwijderen, waardoor de uitvoer netjes wordt.

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

Tags samenstellen

Je kunt gedrag stapelen door één tag helpers te laten aanroepen. Hier omkadert en benadrukt de tag de waarden.

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

Wanneer je geen tags gebruikt

Voor eenvoudige tekenreeksen is een gewone template-letterlijke waarde voldoende. Gebruik alleen een tagfunctie wanneer je geïnterpoleerde waarden consistent moet transformeren, bijvoorbeeld voor escapen of lokalisatie.

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

Korte controle

Test je praktische kennis van tags.

Beantwoord dit in de interactieve les

Samenvatting

Samenvatting: Getagde templates maken veilige, opgemaakte uitvoer mogelijk.

  • Escap alleen geïnterpoleerde waarden voor veilige HTML
  • Statische delen blijven vertrouwd en onbewerkt
  • Gebruik tags voor opmaak, codering en meervoudsvormen
  • Geef de voorkeur aan gewone letterlijke waarden wanneer transformatie niet nodig is
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))
Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
59
Lessen
200
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “Praktische toepassingen van getagde templates” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Praktische toepassingen van getagde templates”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Praktische toepassingen van getagde templates”?

Bouw veilige HTML en gestileerde strings met tags. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Praktische toepassingen van getagde templates”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. De basis van stringinterpolatie
  2. Strings over meerdere regels
  3. Getagde templatefuncties
  4. Praktische toepassingen van getagde templates
← Terug naar JavaScript Academy