De basis van stringinterpolatie
Voeg expressies in template literals in.
De basis van stringinterpolatie is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 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.
Wat zijn template-literalen
Template-literalen zijn een manier om tekenreeksen te maken met het backtickteken in plaats van aanhalingstekens. Je kunt er expressies rechtstreeks in een tekenreeks mee opnemen, zonder handmatige aaneenschakeling.
Een plaatsaanduiding schrijf je met een dollarteken gevolgd door accolades die een expressie omsluiten. JavaScript evalueert de expressie en voegt de waarde ervan in de tekenreeks in.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Syntaxis voor interpolatie
In een template-literal plaats je een expressie tussen een openende combinatie van dollarteken en accolade en een sluitende accolade. De expressie wordt geëvalueerd en omgezet in een tekenreeks.
Het onderstaande voorbeeld gebruikt gewone aaneenschakeling om hetzelfde resultaat te produceren als interpolatie, zodat het idee duidelijk is zonder de letterlijke syntaxis te tonen.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Waarom interpolatie helpt
Aaneenschakeling met de plusoperator wordt moeilijk leesbaar wanneer je veel variabelen en letterlijke tekst combineert. Interpolatie houdt de omliggende tekst intact en vervangt alleen de dynamische delen.
- Minder plusoperatoren
- Geen losse spatiefouten
- Duidelijkere bedoeling
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Elke expressie invoegen
Een plaatsaanduiding kan elke geldige expressie bevatten, niet alleen een variabele. Rekenkundige bewerkingen, functieaanroepen en toegang tot eigenschappen werken allemaal.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Functies hierin aanroepen
Je kunt een functie aanroepen en de geretourneerde waarde in de tekenreeks laten terechtkomen. Het voorbeeld toont de gelijkwaardige vorm met aaneenschakeling.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Eigenschappen uitlezen
Objecteigenschappen kunnen rechtstreeks in een plaatsaanduiding worden uitgelezen. Hier lezen we velden uit een gebruikersobject.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Getallen worden tekenreeksen
Wanneer een getal in een tekenreekscontext terechtkomt, wordt het automatisch omgezet naar de tekstvorm. Bij interpolatie gebeurt dezelfde omzetting.
const total = 19.99
console.log("Total: $" + total)Ternaires in plaatsaanduidingen
Voorwaardelijke logica met de ternaire operator past in een plaatsaanduiding, zodat je inline tussen twee waarden kunt kiezen.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Geneste expressies
Plaatsaanduidingen kunnen methodeketens en geneste aanroepen bevatten. Alles waartoe de expressie wordt geëvalueerd, wordt ingevoegd.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Veel waarden combineren
Template-literalen komen goed tot hun recht wanneer een zin verschillende variabelen verweeft. Vergelijk de leesbare geïnterpoleerde versie, die in woorden wordt beschreven, met dit aaneengeschakelde equivalent.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Het dollarteken escapen
Als je een letterlijke dollarteken-accoladereeks als tekst wilt weergeven in plaats van als plaatsaanduiding, escape je het dollarteken met een backslash in een template-literal. In gewone tekenreeksen is escapen niet nodig.
const text = "Use $\{x\} for a placeholder"
console.log(text)Korte controle
Test je begrip van interpolatie.
Samenvatting
Samenvatting: Template-literalen gebruiken backticks en plaatsaanduidingen om expressies in tekenreeksen op te nemen.
- Een plaatsaanduiding evalueert elke expressie
- Waarden worden omgezet in tekenreeksen
- Interpolatie is duidelijker dan lange aaneenschakeling
- Escape het dollarteken om het letterlijk weer te geven
const n = "World"
console.log("Hello, " + n + "!")
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
Veelgestelde vragen
Is de les “De basis van stringinterpolatie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “De basis van stringinterpolatie”, 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 “De basis van stringinterpolatie”?
Voeg expressies in template literals in. 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 1 van 4.
Hoe lang duurt de les “De basis van stringinterpolatie”?
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
- De basis van stringinterpolatie
- Strings over meerdere regels
- Getagde templatefuncties
- Praktische toepassingen van getagde templates