Interpolacja: {expression}
Osadzaj wyrażenia JavaScript bezpośrednio w szablonach HTML Svelte.
Interpolacja: {expression} to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Składnia nawiasów klamrowych
Dowolne wyrażenie JavaScript można osadzić w znacznikach, ujmując je w nawiasy klamrowe.
<p>Hello {name}!</p>Matematyka i ciągi znaków
Wyrażenia mogą być czymś więcej niż nazwami zmiennych. Można wykonywać obliczenia, łączyć ciągi znaków lub wywoływać metody.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Interpolacja atrybutów
Tej samej składni należy używać wewnątrz atrybutów HTML.
<img src={imageUrl} alt={altText} />Skrócone atrybuty
Jeśli atrybut i zmienna mają tę samą nazwę, można użyć skróconej formy.
<img {src} {alt} />Atrybuty logiczne
W przypadku atrybutów logicznych, takich jak disabled, należy przekazać dowolną wartość uznawaną za prawdziwą. Należy użyć bezpośrednio {flag}.
<button disabled={isLoading}>Save</button>Atrybuty spread
Obiekt atrybutów można rozwinąć na elemencie za pomocą składni {...obj}.
<input {...inputProps} />Tekst a HTML
Domyślnie interpolacja zabezpiecza HTML przez escapowanie, aby zapewnić bezpieczeństwo. {@html ...} należy stosować wyłącznie dla zaufanej zawartości.
<div>{@html trustedHtml}</div>Wyrażenia warunkowe
Wewnątrz nawiasów klamrowych można używać operatorów warunkowych do prostego rozgałęziania.
<p>Status: {isOnline ? "online" : "offline"}</p>Null i undefined
Jeśli wyrażenie oblicza się do null lub undefined, Svelte niczego nie renderuje.
Wywołania funkcji
Funkcje można wywoływać wewnątrz nawiasów klamrowych, ale powinny wykonywać się szybko. Są uruchamiane ponownie przy każdej reaktywnej aktualizacji.
<p>Total: {formatCurrency(amount)}</p>Komentarze
Należy używać zwykłych komentarzy HTML. Nie pojawiają się one w wyrenderowanym wyniku.
<!-- This is a comment -->Szybki test
Jak bezpiecznie osadzać tekst?
Podsumowanie
Pojedyncze nawiasy klamrowe umożliwiają interpolowanie dowolnego wyrażenia w tekście i atrybutach, a skrócone oraz rozwijane atrybuty zwiększają wygodę użycia.
Często zadawane pytania
Czy lekcja „Interpolacja: {expression}” jest bezpłatna?
Tak — pełny tekst „Interpolacja: {expression}” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Interpolacja: {expression}”?
Osadzaj wyrażenia JavaScript bezpośrednio w szablonach HTML Svelte. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Interpolacja: {expression}”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Struktura script template style
- Zmienne reaktywne z użyciem let
- Interpolacja: {expression}
- Wartości obliczane: deklaracje reaktywne $: