Template literal adalah string yang ditulis di antara dua backtick (`), bukan tanda kutip. Di dalamnya kamu bisa menyelipkan nilai langsung ke teks dengan ${...}, tanpa menyambung potongan teks pakai +. Mirip formulir dengan kolom kosong yang terisi sendiri.
🧪 Tebakan cepat:
"Halo ${nama}"ditulis pakai kutip dua biasa. Yang tercetak nama orangnya atau bukan? Tebak dulu, jawabannya ada di bagian "Backtick, bukan kutip biasa".
Menyelipkan nilai dengan ${...}
const nama = "Budi";
const nilai = 80;
const pesan = `Halo ${nama}, nilaimu ${nilai}.`;
console.log(pesan); // Halo Budi, nilaimu 80.
`adalah backtick. Di keyboard letaknya di kiri atas, di sebelah kiri angka 1. Bukan apostrof'.${nama}adalah slot: tanda$, kurung kurawal buka, isinya, lalu kurung kurawal tutup. Slot ini diganti dengan nilainama, yaituBudi.- Teks di luar slot disalin apa adanya, termasuk spasi, koma, dan titik.
Hasilnya sama dengan "Halo " + nama + ", nilaimu " + nilai + ".", tapi lebih pendek dan spasinya gampang dicek.
Isi slot boleh ekspresi apa saja
const harga = 15000;
const jumlah = 2;
const nilai = 80;
console.log(`Total: ${harga * jumlah}`); // Total: 30000
console.log(`Status: ${nilai >= 75 ? "Lulus" : "Belum lulus"}`); // Status: Lulus
- Slot gak harus berisi variabel. Isinya boleh ekspresi apa saja, yaitu kode yang menghasilkan nilai: hitungan, pemanggilan fungsi, dan lain-lain.
harga * jumlahdihitung dulu, lalu hasilnya, 30000, masuk ke teks.nilai >= 75 ? "Lulus" : "Belum lulus"artinya: kalaunilai75 atau lebih, pakai"Lulus", kalau gak, pakai"Belum lulus". Bentukkondisi ? A : Bini dibahas lagi di lesson Kondisi.
Backtick, bukan kutip biasa
const nama = "Budi";
console.log("Halo ${nama}"); // Halo ${nama}
console.log(`Halo {nama}`); // Halo {nama}
console.log(`Halo ${nama}`); // Halo Budi
- Di dalam kutip biasa,
"..."atau'...',${nama}cuma deretan huruf, gak diisi. Jawaban tebakan: yang tercetakHalo ${nama}. - Tanpa
$,{nama}juga tetap jadi teks biasa. - Slot cuma bekerja kalau dua-duanya ada: backtick di luar,
${ }di dalam.
Teks beberapa baris
function label(judul, isi) {
return `${judul}:\n${isi}`;
}
console.log(label("Catatan", "Beli kopi"));
// Catatan:
// Beli kopi
\nadalah karakter pindah baris. Di dalam string, dua karakter ini ditulis berdempetan dan dibaca sebagai satu baris baru.- Template literal juga boleh langsung ditulis berbaris-baris: tekan Enter di dalam backtick, dan teksnya ikut pindah baris.
- Hati-hati, spasi di awal baris berikutnya ikut masuk ke teks. Di dalam fungsi, editor biasanya menambah spasi di depan baris baru, jadi
\nlebih aman.
⚠️ Jebakan yang sering ketemu
- Apostrof dikira backtick.
'Halo ${nama}'gak mengisi apa-apa. Cari tombol backtick di kiri angka 1. - Lupa
$.`Halo {nama}`mencetak{nama}apa adanya. - Spasi lebih di sekitar
\n."Budi \n Developer"menyimpan spasi di akhir baris pertama dan di awal baris kedua.
TL;DR: Template literal ditulis di antara backtick dan bisa menyelipkan nilai dengan ${...}: `Halo ${nama}`. Slot boleh berisi ekspresi apa saja, misalnya ${harga * jumlah}. Di dalam kutip biasa, ${...} gak diisi, dan tanpa $ slotnya jadi teks biasa. Buat pindah baris pakai \n, atau tekan Enter di dalam backtick dengan ingat spasi di awal baris ikut masuk.
