Pernah gak kamu mau bikin kalimat panjang yang di dalamnya ada variabel, terus kodenya jadi penuh sama + " " +? Selain capek ngetiknya, kodenya juga jadi susah dibaca. Di JavaScript modern, kita pakai Backtick (`) untuk membuat Template Literals.
🧩 Apa yang Akan Dipelajari
- Mengganti tanda kutip (
'atau") dengan Backtick (`). - Menggunakan Interpolasi (
${}) untuk memasukkan variabel ke dalam teks. - Membuat teks multi-baris (Multi-line Strings) tanpa ribet.
- Menjalankan operasi matematika langsung di dalam teks.
⚙️ Persiapan
- Buka Console browser (F12).
- Siapkan beberapa variabel yang sudah kita pelajari (String, Number).
- Cari tombol Backtick (
`) di keyboard-mu (biasanya di bawah tombol Esc).
🚀 Langkah-Langkah
1. Perbedaan "Gaya Lama" vs "Gaya Baru"
Mari kita bandingkan cara lama (Concatenation) dengan cara baru (Template Literals).
const nama = "Kay";
const gadget = "Xiaomi 15";
// Cara Lama (Bikin pusing):
console.log("Halo, nama saya " + nama + " dan saya pakai " + gadget + ".");
// Cara Baru (Template Literals):
console.log(`Halo, nama saya ${nama} dan saya pakai ${gadget}.`);
Penjelasan: Kamu cuma perlu bungkus semuanya pakai backtick, lalu masukkan variabel di dalam ${ }. Jauh lebih bersih, kan?
2. Multi-line String (Teks Banyak Baris)
Dulu, kalau mau bikin baris baru, kita harus pakai kode aneh seperti \n. Sekarang? Tinggal tekan Enter aja di keyboard!
// Cara Baru:
const pesan = `Halo Shala,
Jangan lupa belajar JavaScript hari ini ya.
Semangat!`;
console.log(pesan);
3. Ekspresi di Dalam ${ }
Hebatnya lagi, di dalam ${ } kamu gak cuma bisa masukin variabel, tapi juga bisa langsung ngitung atau manggil fungsi!
const harga = 5000;
const jumlah = 3;
console.log(`Total belanjaan kamu adalah: Rp${harga * jumlah}`);
// Hasil: Total belanjaan kamu adalah: Rp15000
4. Menggunakan Logika (Ternary)
Ingat materi Ternary Operator? Kamu bisa masukin itu juga ke sini!
const umur = 20;
console.log(`Status: ${umur >= 18 ? "Dewasa" : "Anak-anak"}`);
💡 Tips Tambahan
- Jangan Tertukar: Pastikan pakai backtick (
`), bukan kutip satu ('). Visualnya mirip tapi fungsinya beda total. - HTML Templates: Teknik ini sering banget dipake buat bikin elemen HTML dinamis lewat JavaScript (nanti kita pake di materi DOM!).
- Clean Code: Gunakan Template Literals setiap kali kamu butuh menggabungkan lebih dari dua variabel dalam satu kalimat agar kodemu mudah dibaca teman setim.
❗ Troubleshooting
Masalah: Kenapa di layar muncul tulisan ${nama} secara harfiah, bukan isi variabelnya?
Solusi: Cek pembungkus teksnya. Kamu pasti pakai kutip biasa (' atau "). Interpolasi ${} cuma jalan kalau kamu pakai Backtick (`).
🎯 Kesimpulan
Template Literals bikin urusan tulis-menulis di JavaScript jadi sangat menyenangkan. Gak ada lagi drama kurang tanda tambah atau spasi yang nyelip. Dengan ${ }, semua jadi lebih praktis dan terlihat profesional.