Template Literals Adalah: Cara Pakai Backtick (`) dan ${} di JavaScript
Template literals adalah cara menulis string pakai backtick (`) di JavaScript agar bisa menyisipkan variabel dengan ${}. Pelajari bedanya dengan tanda plus, multiline, dan contohnya.
Pembuat Hyper Sheets & BelajarWeb.dev
Template literals adalah cara menulis teks (string) di JavaScript menggunakan tanda backtick (`) sehingga kamu bisa langsung menyisipkan variabel dan ekspresi ke dalam string lewat sintaks ${...}. Bayangkan kamu mengisi formulir dengan bagian yang kosong: “Halo, nama saya ____ dan umur saya ____.” Template literals membiarkan JavaScript mengisi bagian kosong itu secara otomatis dari variabelmu, tanpa perlu memotong-motong teks lalu menyambungnya lagi dengan tanda +. Fitur ini diperkenalkan sejak ES6 (2015) dan langsung jadi cara favorit menulis string karena jauh lebih rapi dan mudah dibaca.
Di panduan ini kamu akan belajar template literals dari nol: apa itu backtick dan kenapa berbeda dari tanda kutip biasa, cara kerja interpolasi ${...}, perbedaannya dengan penyambungan string pakai + (concatenation), cara menulis teks banyak baris (multiline), sampai contoh-contoh praktis yang benar-benar kamu pakai setiap hari. Semua contoh memakai istilah dan komentar berbahasa Indonesia supaya gampang dicerna.
Apa Itu Template Literals?
Template literals adalah salah satu dari tiga cara menulis string di JavaScript. Bedanya terletak pada tanda pembungkusnya: bukan tanda kutip tunggal (') atau ganda ("), melainkan backtick (`), tombolnya biasanya ada di pojok kiri atas keyboard, tepat di bawah tombol Escape.
Lihat ketiga cara ini berdampingan:
const a = 'Halo dunia' // kutip tunggal
const b = "Halo dunia" // kutip ganda
const c = `Halo dunia` // backtick, ini template literalKetiganya menghasilkan string Halo dunia yang sama persis. Jadi kalau isinya cuma teks biasa, ketiganya setara. Kekuatan backtick baru terlihat saat kamu butuh menyisipkan variabel atau menulis banyak baris, dua hal yang tidak bisa dilakukan tanda kutip biasa. Kamu bisa mempelajari fitur ini lebih dalam lewat pelajaran template literals interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser.
String Interpolation dengan ${...}
Inilah alasan utama orang memakai template literals: interpolasi, yaitu menyisipkan nilai variabel langsung ke dalam string. Caranya cukup tulis ${namaVariabel} di dalam backtick, dan JavaScript otomatis menggantinya dengan nilai variabel itu.
const nama = 'Sarah'
const umur = 25
// Menyisipkan variabel langsung ke dalam teks
const pesan = `Halo, nama saya ${nama} dan umur saya ${umur} tahun.`
console.log(pesan) // Halo, nama saya Sarah dan umur saya 25 tahun.Perhatikan betapa mulusnya teks itu terbaca, persis seperti kalimat biasa, tapi dengan “lubang” ${...} yang diisi otomatis. Yang di dalam ${} tidak harus sekadar variabel; ia bisa berupa ekspresi apa pun: operasi matematika, pemanggilan fungsi, bahkan operator ternary.
const harga = 50000
const jumlah = 3
// Ekspresi matematika langsung di dalam ${}
console.log(`Total belanja: Rp${harga * jumlah}`) // Total belanja: Rp150000
// Pemanggilan method juga bisa
const kota = 'bandung'
console.log(`Kota: ${kota.toUpperCase()}`) // Kota: BANDUNGCoba Sendiri: Interpolasi Template Literal
Teori lebih gampang menempel kalau kamu melihatnya bergerak. Ketik nama dan umur di bawah, lalu perhatikan bagaimana ${nama} dan ${umur} di dalam backtick otomatis terisi. Coba juga geser ke mode “Concat (+)” untuk melihat betapa lebih ribetnya menyambung teks dengan tanda plus:
Coba Sendiri
Kode
const pesan = `Halo, nama saya ${nama} dan umur saya ${umur} tahun.`Hasil (isi variabel pesan)
Nilai variabel langsung disisipkan lewat ${...} di dalam backtick.
Setelah bermain dengan demo di atas, kamu akan langsung merasakan kenapa hampir semua developer modern lebih memilih backtick daripada tanda + untuk merangkai teks yang mengandung variabel.
Perbedaan Template Literals dan Concatenation (+)
Sebelum ES6, satu-satunya cara menyisipkan variabel ke dalam string adalah concatenation, menyambung potongan teks dan variabel dengan tanda +. Cara ini masih bekerja, tapi cepat jadi berantakan. Bandingkan keduanya untuk kalimat yang sama:
const nama = 'Andi'
const kelas = 'JavaScript'
// Cara lama: concatenation dengan +
const lama = 'Selamat datang ' + nama + ' di kelas ' + kelas + '!'
// Cara baru: template literal
const baru = `Selamat datang ${nama} di kelas ${kelas}!`Keduanya menghasilkan Selamat datang Andi di kelas JavaScript!, tapi versi template literal jauh lebih mudah dibaca. Dengan concatenation, kamu harus cermat mengatur spasi (perhatikan spasi setelah datang dan sebelum di) dan mudah lupa satu tanda +. Berikut ringkasan perbedaannya:
| Aspek | Template Literal | Concatenation (+) |
|---|---|---|
| Pembungkus | Backtick (`) |
Kutip ' atau " |
| Menyisipkan variabel | ${variabel} |
+ variabel + |
| Spasi | Ditulis alami dalam teks | Harus diatur manual |
| Multiline | Didukung langsung | Perlu \n atau + |
| Keterbacaan | Tinggi | Menurun saat panjang |
Menulis Teks Banyak Baris (Multiline)
Keunggulan kedua template literals adalah multiline string: menulis teks yang membentang beberapa baris hanya dengan menekan Enter di dalam backtick. Dengan tanda kutip biasa, kamu harus menyisipkan karakter khusus \n (newline) secara manual.
// Cara lama: harus pakai \n
const lama = 'Baris pertama\nBaris kedua\nBaris ketiga'
// Cara baru: cukup tekan Enter di dalam backtick
const baru = `Baris pertama
Baris kedua
Baris ketiga`Fitur ini sangat berguna saat kamu menyusun teks panjang seperti template email, blok HTML, atau pesan multi-baris. Apa yang kamu tulis persis seperti apa yang keluar, termasuk indentasi dan barisnya.
const nama = 'Rina'
const email = `Halo ${nama},
Terima kasih sudah mendaftar di kursus kami.
Kelas pertama dimulai hari Senin.
Salam,
Tim Pengajar`Contoh Praktis Sehari-hari
Supaya makin nyata, berikut pola template literals yang benar-benar kamu pakai di proyek. Salah satu yang paling sering adalah membangun elemen HTML secara dinamis, pola yang sangat umum saat kamu menampilkan data ke halaman:
const produk = { nama: 'Kaos Polos', harga: 75000 }
const kartu = `
<div class="kartu">
<h3>${produk.nama}</h3>
<p>Rp${produk.harga}</p>
</div>
`Template literals juga rapi dipadukan dengan array method seperti map untuk membuat daftar:
const buah = ['Apel', 'Mangga', 'Jeruk']
const daftar = buah.map((item) => `<li>${item}</li>`).join('')
// <li>Apel</li><li>Mangga</li><li>Jeruk</li>Dan untuk menampilkan hasil kondisi langsung di dalam teks, kamu bisa menaruh operator ternary di dalam ${}:
const nilai = 80
console.log(`Status: ${nilai >= 75 ? 'Lulus' : 'Belum lulus'}`) // Status: LulusPola menyisipkan variabel dan ekspresi seperti ini adalah fondasi penting sebelum kamu masuk ke library modern. Kalau kamu ingin melihat bagaimana teknik serupa dipakai untuk menampilkan data di antarmuka, belajar React dari nol menunjukkan bagaimana JSX memakai {...} dengan semangat yang mirip. Untuk memperkuat dasar JavaScript-nya sendiri, ulas kembali panduan apa itu JavaScript.
Tagged Template (Sekilas untuk Tingkat Lanjut)
Ada fitur lanjutan bernama tagged template yang membiarkan sebuah fungsi memproses isi template literal sebelum jadi string final. Ini dipakai library populer seperti styled-components. Kamu belum perlu menguasainya sebagai pemula, cukup kenali bentuknya:
function tebalkan(teks, ...nilai) {
return teks[0] + nilai.map((n) => `**${n}**`).join('') + teks[teks.length - 1]
}
const nama = 'Budi'
console.log(tebalkan`Halo ${nama}!`) // Halo **Budi**!Cukup tahu bahwa nama fungsi yang ditulis tepat di depan backtick (tanpa kurung) akan “menangkap” bagian teks dan nilai ${} secara terpisah. Untuk sekarang, fokuslah dulu pada interpolasi biasa.
Kesalahan Umum Saat Memakai Template Literals
Beberapa jebakan yang sering menimpa pemula:
1. Memakai tanda kutip biasa, bukan backtick. 'Halo ${nama}' tidak akan menyisipkan variabel, hasilnya justru teks mentah Halo ${nama}. Interpolasi hanya bekerja di dalam backtick.
2. Lupa tanda dollar atau kurung kurawal. `Halo {nama}` atau `Halo $nama` tidak akan bekerja. Sintaksnya harus lengkap: ${nama}.
3. Menulis logika terlalu rumit di dalam ${}. Meskipun boleh menaruh ekspresi, hindari kondisi bertingkat yang panjang di dalamnya karena jadi susah dibaca. Hitung dulu di variabel terpisah, baru sisipkan.
4. Tertukar backtick dengan tanda kutip tunggal. Secara sekilas keduanya mirip. Kalau interpolasimu tidak jalan, periksa apakah kamu benar-benar memakai backtick (`) dan bukan '.
Apa hasil dari console.log(`Skor: ${5 * 2}`)?
FAQ Seputar Template Literals
Apa itu template literals dengan bahasa sederhana?
Template literals adalah cara menulis teks di JavaScript memakai tanda backtick (`) alih-alih tanda kutip biasa. Keunggulannya kamu bisa menyisipkan variabel langsung ke dalam teks dengan ${nama}, dan menulis teks banyak baris tanpa repot. Contoh: `Halo ${nama}` otomatis menampilkan nilai variabel nama.
Apa perbedaan template literal dan string biasa?
String biasa dibungkus kutip tunggal (') atau ganda (") dan tidak bisa menyisipkan variabel maupun teks multi-baris secara langsung. Template literal dibungkus backtick (`) dan mendukung interpolasi ${...} serta multiline. Kalau teksmu statis, keduanya sama saja; kalau ada variabel, backtick jauh lebih rapi.
Apa itu ${} dalam template literal?
${...} disebut placeholder atau interpolasi. Apa pun yang kamu tulis di antara ${ dan } akan dievaluasi oleh JavaScript, lalu hasilnya disisipkan ke dalam string. Isinya bisa variabel (${nama}), operasi (${a + b}), atau pemanggilan fungsi (${hitung()}).
Kapan template literals diperkenalkan di JavaScript?
Template literals hadir di ES6 (ECMAScript 2015), pembaruan besar JavaScript yang juga memperkenalkan let, const, dan arrow function. Sekarang semua browser modern sudah mendukungnya penuh, jadi aman dipakai tanpa khawatir kompatibilitas.
Apakah backtick sama dengan tanda kutip tunggal?
Bukan, keduanya berbeda. Backtick (`) condong ke kiri dan letaknya di pojok kiri atas keyboard (satu tombol dengan ~). Tanda kutip tunggal (') tegak lurus. Hanya backtick yang mengaktifkan fitur interpolasi ${...} dan multiline; tanda kutip biasa tidak.
Bisakah menaruh if-else di dalam ${}?
Tidak bisa langsung, karena ${} hanya menerima ekspresi, bukan statement seperti if. Sebagai gantinya pakai operator ternary yang menghasilkan nilai: `Status: ${lulus ? 'Ya' : 'Tidak'}`. Untuk logika yang lebih rumit, hitung dulu di variabel terpisah sebelum menyisipkannya.
Langkah Selanjutnya
Setelah menguasai template literals, konsep-konsep berikut akan terasa lebih mudah karena sering dipakai bersama:
- Array methods (
map,filter,join), sering dipadukan dengan template literal untuk merangkai daftar atau elemen HTML. - Arrow function, pasangan setia template literal saat membangun potongan teks dinamis.
- JSX di React, memakai
{...}dengan semangat interpolasi yang mirip; template literal jadi jembatan pemahaman yang baik.
Template literals kelihatan kecil, tapi ia salah satu sintaks paling sering kamu tulis di JavaScript modern. Untuk latihan bertahap dengan umpan balik langsung, kerjakan materi template literals di Hyper Sheets. Semakin sering kamu memakai backtick, semakin alami rasanya, dan kodemu akan jadi lebih pendek, lebih bersih, dan jauh lebih mudah dibaca.