Interpolatie: {expression}
Sluit JavaScript-expressies rechtstreeks in Svelte HTML-templates in.
Interpolatie: {expression} is een gratis Sveltejs Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Sveltejs Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Syntaxis met accolades
Voeg elke JavaScript-expressie in de opmaak in door deze tussen accolades te plaatsen.
<p>Hello {name}!</p>Rekenen en tekenreeksen
Expressies kunnen meer zijn dan alleen variabelenamen. Je kunt rekenen, tekenreeksen samenvoegen of methodeaanroepen uitvoeren.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Interpolatie van attributen
Gebruik dezelfde syntaxis in HTML-attributen.
<img src={imageUrl} alt={altText} />Attributen in verkorte vorm
Als het attribuut en de variabele dezelfde naam hebben, gebruik je de verkorte vorm.
<img {src} {alt} />Booleaanse attributen
Geef voor booleaanse attributen zoals disabled een willekeurige waarde die als waar wordt beschouwd. Gebruik rechtstreeks {flag}.
<button disabled={isLoading}>Save</button>Spread-attributen
Verspreid een object met attributen over een element met de syntaxis {...obj}.
<input {...inputProps} />Tekst tegenover HTML
Interpolatie ontsmet HTML standaard voor de veiligheid. Gebruik {@html ...} alleen met vertrouwde inhoud.
<div>{@html trustedHtml}</div>Voorwaardelijke expressies
Ternaire operatoren werken binnen accolades voor eenvoudige vertakkingen.
<p>Status: {isOnline ? "online" : "offline"}</p>Null en undefined
Als je expressie null of undefined oplevert, geeft Svelte niets weer.
Functieaanroepen
Roep functies aan binnen accolades, maar houd ze licht. Ze worden bij elke reactieve update opnieuw uitgevoerd.
<p>Total: {formatCurrency(amount)}</p>Opmerkingen
Gebruik gewone HTML-opmerkingen. Deze verschijnen niet in de weergegeven uitvoer.
<!-- This is a comment -->Korte controle
Hoe voeg je veilig tekst in?
Samenvatting
Met enkele accolades voeg je elke expressie in tekst en attributen in. Voor gebruiksgemak zijn er ook verkorte en verspreide vormen.
Leer HTML 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
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Interpolatie: {expression}” gratis?
Ja — de volledige tekst van “Interpolatie: {expression}” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Sveltejs Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat leer ik in “Interpolatie: {expression}”?
Sluit JavaScript-expressies rechtstreeks in Svelte HTML-templates in. Je oefent met Sveltejs 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 Sveltejs Academy te beginnen?
Ervaring vooraf is niet nodig. Sveltejs 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 3 van 4.
Hoe lang duurt de les “Interpolatie: {expression}”?
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 Sveltejs Academy?
Ja. Elke les over Sveltejs 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 structuur van script-, template- en stylegedeelten
- Reactieve variabelen met let
- Interpolatie: {expression}
- Berekende waarden: reactieve declaraties met $: