Interpolasi: {expression}
Sisipkan ekspresi JavaScript langsung ke dalam template HTML Svelte.
Interpolasi: {expression} adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Sintaks Kurung Kurawal
Sisipkan ekspresi JavaScript apa pun ke dalam markah dengan membungkusnya menggunakan kurung kurawal.
<p>Hello {name}!</p>Matematika dan String
Ekspresi dapat berupa lebih dari sekadar nama variabel. Lakukan perhitungan, penggabungan string, atau pemanggilan metode.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Interpolasi Atribut
Gunakan sintaks yang sama di dalam atribut HTML.
<img src={imageUrl} alt={altText} />Atribut Singkat
Jika atribut dan variabel memiliki nama yang sama, gunakan bentuk singkatnya.
<img {src} {alt} />Atribut Boolean
Untuk atribut boolean seperti disabled, berikan nilai apa pun yang bernilai benar. Gunakan {flag} secara langsung.
<button disabled={isLoading}>Save</button>Atribut Sebaran
Sebarkan objek berisi atribut ke sebuah elemen dengan sintaks {...obj}.
<input {...inputProps} />Teks dan HTML
Secara bawaan, interpolasi melakukan pelolosan HTML demi keamanan. Gunakan {@html ...} hanya dengan konten tepercaya.
<div>{@html trustedHtml}</div>Ekspresi Kondisional
Ekspresi ternary dapat digunakan di dalam kurung kurawal untuk percabangan sederhana.
<p>Status: {isOnline ? "online" : "offline"}</p>Null dan Undefined
Jika ekspresi Anda menghasilkan null atau undefined, Svelte tidak merender apa pun.
Pemanggilan Fungsi
Panggil fungsi di dalam kurung kurawal, tetapi pastikan fungsi tersebut ringan. Fungsi akan dijalankan ulang pada setiap pembaruan reaktif.
<p>Total: {formatCurrency(amount)}</p>Komentar
Gunakan komentar HTML biasa. Komentar tersebut tidak muncul dalam keluaran yang dirender.
<!-- This is a comment -->Pemeriksaan Singkat
Bagaimana cara menyisipkan teks dengan aman?
Rangkuman
Satu pasang kurung kurawal menyisipkan ekspresi apa pun ke dalam teks dan atribut, dengan bentuk singkat dan sebaran untuk kemudahan penggunaan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Interpolasi: {expression}” gratis?
Ya — teks lengkap “Interpolasi: {expression}” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Interpolasi: {expression}”?
Sisipkan ekspresi JavaScript langsung ke dalam template HTML Svelte. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Interpolasi: {expression}” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur template script style
- Variabel Reaktif dengan let
- Interpolasi: {expression}
- Nilai Terhitung: Deklarasi Reaktif $: