Interpolation: {expression}
Bädda in JavaScript-uttryck direkt i Sveltes HTML-mallar.
Interpolation: {expression} är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Syntax med klammerparenteser
Bädda in valfritt JavaScript-uttryck i markupen genom att omge det med klammerparenteser.
<p>Hello {name}!</p>Matematik och strängar
Uttryck kan vara mer än variabelnamn. Utför matematiska beräkningar, sammanfoga strängar eller anropa metoder.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Interpolation i attribut
Använd samma syntax i HTML-attribut.
<img src={imageUrl} alt={altText} />Förkortade attribut
Om attributet och variabeln har samma namn kan du använda den förkortade formen.
<img {src} {alt} />Booleska attribut
För booleska attribut som disabled skickar du med valfritt sanningsenligt värde. Använd {flag} direkt.
<button disabled={isLoading}>Save</button>Spridningsattribut
Sprid ett objekt med attribut över ett element med syntaxen {...obj}.
<input {...inputProps} />Text kontra HTML
Som standard HTML-kodas interpolering av säkerhetsskäl. Använd {@html ...} endast med innehåll du litar på.
<div>{@html trustedHtml}</div>Villkorsuttryck
Ternära uttryck fungerar inom klammerparenteser för enkel förgrening.
<p>Status: {isOnline ? "online" : "offline"}</p>Null och Undefined
Om uttrycket evalueras till null eller undefined renderar Svelte ingenting.
Funktionsanrop
Anropa funktioner inom klammerparenteser, men håll dem effektiva. De körs om vid varje reaktiv uppdatering.
<p>Total: {formatCurrency(amount)}</p>Kommentarer
Använd vanliga HTML-kommentarer. De visas inte i den renderade outputen.
<!-- This is a comment -->Snabbtest
Hur bäddar du in text på ett säkert sätt?
Sammanfattning
Enkla klammerparenteser interpolerar valfritt uttryck i text och attribut, med förkortningar och spridning för ett smidigare arbetsflöde.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Interpolation: {expression}” gratis?
Ja – hela texten till ”Interpolation: {expression}” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Interpolation: {expression}”?
Bädda in JavaScript-uttryck direkt i Sveltes HTML-mallar. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Interpolation: {expression}”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Strukturen script template style
- Reaktiva variabler med let
- Interpolation: {expression}
- Beräknade värden: reaktiva deklarationer med $: