JavaScript Academy · Pelajaran

Dasar-Dasar Interpolasi String

Sematkan expression di dalam literal templat.

Dasar-Dasar Interpolasi String adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Literal Templat

Literal templat adalah cara membuat teks menggunakan tanda petik terbalik, bukan tanda kutip. Literal ini memungkinkan Anda menyisipkan ekspresi langsung ke dalam teks tanpa penggabungan manual.

Penampung ditulis dengan tanda dolar yang diikuti kurung kurawal yang membungkus sebuah ekspresi. JavaScript mengevaluasi ekspresi tersebut lalu menyisipkan nilainya ke dalam teks.

const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)

Sintaks Interpolasi

Di dalam literal templat, Anda menempatkan ekspresi di antara tanda dolar-kurung kurawal pembuka dan kurung kurawal penutup. Ekspresi tersebut dievaluasi dan diubah menjadi teks.

Contoh di bawah menggunakan penggabungan biasa untuk menghasilkan hasil yang sama seperti interpolasi, sehingga idenya tetap jelas tanpa menampilkan sintaks literalnya.

const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)

Mengapa Interpolasi Membantu

Penggabungan dengan operator tambah menjadi sulit dibaca ketika Anda mencampur banyak variabel dan teks literal. Interpolasi mempertahankan teks di sekitarnya dan hanya mengganti bagian yang dinamis.

Lebih sedikit operator penjumlahan
Tidak ada kesalahan spasi yang tidak disengaja
Maksud yang lebih jelas

const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")

Menyisipkan Ekspresi Apa Pun

Sebuah penampung dapat berisi ekspresi valid apa pun, bukan hanya variabel. Operasi aritmetika, pemanggilan fungsi, dan akses properti semuanya dapat digunakan.

const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))

Memanggil Fungsi di Dalamnya

Anda dapat memanggil suatu fungsi dan membiarkan nilai yang dikembalikannya masuk ke dalam teks. Contoh tersebut menunjukkan bentuk penggabungan yang setara.

function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))

Akses Properti

Properti objek dapat dibaca langsung di dalam penampung. Di sini kita membaca bidang-bidang dari objek pengguna.

const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)

Angka Menjadi Teks

Ketika angka masuk ke dalam konteks teks, angka tersebut secara otomatis diubah menjadi bentuk teksnya. Pemaksaan tipe yang sama juga terjadi dalam interpolasi.

const total = 19.99
console.log("Total: $" + total)

Operator Kondisional di Dalam Penampung

Logika kondisional dengan operator kondisional dapat ditempatkan di dalam penampung, sehingga Anda dapat memilih salah satu dari dua nilai secara langsung.

const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)

Ekspresi Bersarang

Penampung dapat berisi rangkaian metode dan pemanggilan yang bersarang. Apa pun hasil evaluasi ekspresinya akan disisipkan.

const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)

Mencampur Banyak Nilai

Literal templat sangat berguna ketika sebuah kalimat memadukan beberapa variabel. Bandingkan versi interpolasi yang mudah dibaca, yang dijelaskan dalam uraian, dengan bentuk penggabungan yang setara ini.

const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)

Meloloskan Tanda Dolar

Jika Anda ingin rangkaian tanda dolar dan kurung kurawal secara harfiah muncul sebagai teks, bukan sebagai penampung, awali tanda dolar dengan garis miring terbalik di dalam literal templat. Dalam teks biasa, pelolosan tidak diperlukan.

const text = "Use $\{x\} for a placeholder"
console.log(text)

Pemeriksaan Singkat

Uji pemahaman Anda tentang interpolasi.

Ringkasan

Ringkasan: Literal templat menggunakan tanda petik terbalik dan penampung untuk menyisipkan ekspresi ke dalam teks.

Penampung mengevaluasi ekspresi apa pun
Nilai diubah menjadi teks
Interpolasi lebih jelas daripada penggabungan yang panjang
Meloloskan tanda dolar membuatnya tampil secara harfiah

const n = "World"
console.log("Hello, " + n + "!")

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Interpolasi String” gratis?

Ya — teks lengkap “Dasar-Dasar Interpolasi String” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar Interpolasi String”?

Sematkan expression di dalam literal templat. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar Interpolasi String” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

← Kembali ke JavaScript Academy