Menulis string di JavaScript kini jadi lebih mudah dan fleksibel berkat fitur Template Literal (juga dikenal sebagai template string) yang diperkenalkan sejak ES6. Dengan fitur ini, kamu bisa:
- Menyisipkan variabel langsung ke dalam string
- Membuat string multi-baris tanpa repot
- Menulis string yang lebih bersih dan mudah dibaca
Mari kita lihat bagaimana Template Literal bisa menyederhanakan cara kamu menulis kode.
📌 Sintaks Dasar Template Literal
Template literal menggunakan tanda **backtick ()** alih-alih tanda kutip tunggal 'atau ganda"`.
Contoh sederhana:
1const nama = "Rani";
2const kalimat = `Halo, nama saya ${nama}`;
3
4console.log(kalimat); // Halo, nama saya Rani
5
1const nama = "Rani";
2const kalimat = `Halo, nama saya ${nama}`;
3
4console.log(kalimat); // Halo, nama saya Rani
5
🧩 Menyisipkan Variabel dan Ekspresi
Kita bisa menyisipkan variabel atau ekspresi apa pun menggunakan ${...} di dalam template literal.
1const a = 5;
2const b = 3;
3const hasil = `Hasil dari ${a} + ${b} adalah ${a + b}`;
4
5console.log(hasil); // Hasil dari 5 + 3 adalah 8
6
1const a = 5;
2const b = 3;
3const hasil = `Hasil dari ${a} + ${b} adalah ${a + b}`;
4
5console.log(hasil); // Hasil dari 5 + 3 adalah 8
6
🧵 String Multi-baris
Sebelum ES6, kita harus menyatukan string panjang secara manual:
1const teks = "Baris pertaman" +
2 "Baris kedua";
3
1const teks = "Baris pertaman" +
2 "Baris kedua";
3
Dengan template literal:
1const teks = `Baris pertama
2Baris kedua`;
3
4console.log(teks);
5/*
6Baris pertama
7Baris kedua
8*/
9
1const teks = `Baris pertama
2Baris kedua`;
3
4console.log(teks);
5/*
6Baris pertama
7Baris kedua
8*/
9
Lebih bersih dan jelas, bukan?
🧠 Digabungkan dengan Function
Template literal juga bisa digunakan dengan tagged template function, meskipun ini lebih cocok untuk kasus lanjutan seperti i18n (internationalization) atau styling di framework seperti styled-components.
Contoh sederhana:
1function contoh(strings, ekspresi) {
2 console.log(strings); // ['Nilainya adalah ', '']
3 console.log(ekspresi); // 42
4}
5
6const nilai = 42;
7contoh`Nilainya adalah ${nilai}`;
8
1function contoh(strings, ekspresi) {
2 console.log(strings); // ['Nilainya adalah ', '']
3 console.log(ekspresi); // 42
4}
5
6const nilai = 42;
7contoh`Nilainya adalah ${nilai}`;
8
⚠️ Tips & Catatan
- Gunakan backtick
` — bukan kutip biasa ' atau "
- Template literal cocok digunakan saat kamu membuat teks dinamis atau perlu baris baru
- Tidak cocok untuk kasus yang butuh pemrosesan performa tinggi di string
✨ Kesimpulan
Template literal membuat penulisan string di JavaScript lebih sederhana, elegan, dan efisien. Fitur ini sangat bermanfaat terutama saat kamu bekerja dengan data dinamis, membuat teks multi-baris, atau menyusun HTML di dalam JavaScript.
Setelah memahami destructuring, spread/rest operator, dan template literal, kamu semakin siap untuk mengembangkan aplikasi JavaScript modern. Selanjutnya, kita akan masuk ke topik Modules di JavaScript — sistem yang memungkinkan kamu memecah kode menjadi bagian-bagian terorganisir.