Interpolering: {expression}
Bygg inn JavaScript-uttrykk direkte i Svelte's HTML-maler.
Interpolering: {expression} er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Syntaks med krøllparenteser
Sett inn et hvilket som helst JavaScript-uttrykk i markupen ved å omslutte det med krøllparenteser.
<p>Hello {name}!</p>Matematikk og strenger
Uttrykk kan være mer enn variabelnavn. Utfør matematikk, slå sammen strenger eller kall metoder.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Interpolering i attributter
Bruk den samme syntaksen inne i HTML-attributter.
<img src={imageUrl} alt={altText} />Kortform for attributter
Hvis attributtet og variabelen har samme navn, kan du bruke kortformen.
<img {src} {alt} />Booleske attributter
For booleske attributter som disabled kan du sende inn en hvilken som helst truthy-verdi. Bruk {flag} direkte.
<button disabled={isLoading}>Save</button>Spredte attributter
Spre et objekt med attributter over et element ved hjelp av syntaksen {...obj}.
<input {...inputProps} />Tekst kontra HTML
Som standard HTML-escaper interpolering tekst av sikkerhetshensyn. Bruk {@html ...} bare med innhold du stoler på.
<div>{@html trustedHtml}</div>Betingede uttrykk
Du kan bruke ternære uttrykk inne i krøllparenteser for enkel forgrening.
<p>Status: {isOnline ? "online" : "offline"}</p>Null og undefined
Hvis uttrykket evalueres til null eller undefined, gjengir Svelte ingenting.
Funksjonskall
Kall funksjoner inne i krøllparenteser, men hold dem effektive. De kjøres på nytt ved hver reaktive oppdatering.
<p>Total: {formatCurrency(amount)}</p>Kommentarer
Bruk vanlige HTML-kommentarer. De vises ikke i det gjengitte resultatet.
<!-- This is a comment -->Kort sjekk
Hvordan setter du inn tekst på en trygg måte?
Oppsummering
Enkle krøllparenteser interpolerer ethvert uttrykk i tekst og attributter, med kortformer og spredning for bedre ergonomi.
Lær deg HTML 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
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Interpolering: {expression}» gratis?
Ja – hele teksten i «Interpolering: {expression}» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Interpolering: {expression}»?
Bygg inn JavaScript-uttrykk direkte i Svelte's HTML-maler. Du øver på Sveltejs 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 Sveltejs Academy?
Ingen tidligere erfaring er nødvendig. Sveltejs 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 3 av 4.
Hvor lang tid tar leksjonen «Interpolering: {expression}»?
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 Sveltejs Academy-leksjonen?
Ja. Alle Sveltejs 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
- Strukturen til script-, template- og style-delene
- Reaktive variabler med let
- Interpolering: {expression}
- Beregnede verdier: $: reaktive deklarasjoner