Coba liat dua cara nulis pesan ucapan dengan nama dinamis di JavaScript:

"Halo, " + nama + "! Saldo kamu sekarang Rp " + saldo + ", makasih udah top up Rp " + topup + "."

Kemudian:

`Halo, ${nama}! Saldo kamu sekarang Rp ${saldo}, makasih udah top up Rp ${topup}.`

Yang kedua jelas lebih enak dibaca, lebih mudah maintain, lebih sedikit chance typo. Itu template literals — fitur ES6 yang ngubah cara orang nulis string di JavaScript. Pake backtick (`), bukan kutip biasa, dan kamu bisa selipin variabel langsung pake ${...}.

💡 Bonus power. Template literals juga support multi-baris tanpa \n. Mau bikin HTML template di string? Tinggal tulis berbaris-baris di antara backtick, indentasi bebas, semua dipertahanin.

const nama = "Budi";
const umur = 17;

// Cara lama (concatenation)
const pesan1 = "Halo, saya " + nama + ", umur " + umur + " tahun!";

// Cara baru (template literal)
const pesan2 = `Halo, saya ${nama}, umur ${umur} tahun!`;

Keunggulan:

• Lebih mudah dibaca dibanding concatenation (+)
• Bisa multi-line tanpa \n:

const html = `
  <div>
    <h1>${nama}</h1>
    <p>Umur: ${umur}</p>
  </div>
`;

• Bisa menyisipkan ekspresi:

`Total: ${harga * jumlah}`
`Status: ${nilai >= 75 ? "Lulus" : "Tidak Lulus"}`

🎭 Analogi sehari-hari

Seperti surat undangan template dari percetakan: kalimatnya sudah jadi, ada slot kosong ${...} tempat tempel nama tamu. Kamu kasih nama, percetakan tempel di tempatnya. Lebih cepat dari ngetik ulang surat satu-satu.

⚠️ Jebakan yang sering ditemui

1. Backtick (`) bukan apostrof (') — lokasinya sebelah 1 di keyboard.

'Halo ${nama}'    // ❌ string biasa, ${nama} tidak diproses
`Halo ${nama}`    // ✅ template literal

2. Lupa simbol $.

`Halo {nama}`     // ❌ literal teks "{nama}"
`Halo ${nama}`    // ✅

3. Backtick di dalam template literal harus di-escape.

`kode: \`halo\``  // backtick literal pakai \`

TL;DR: Template literals = string pakai backtick (`) dengan interpolasi ${expr}. Ganti string concat ("..." + var + "...") yang ribet. Bonus: multi-line tanpa \n (indentasi dipertahanin). Bisa nampung ekspresi penuh (${harga * jumlah}, ${cond ? a : b}). Backtick beda dari apostrof — lokasinya sebelah 1 di keyboard. Lupa $ = {nama} jadi literal teks. Tagged templates (advanced) buat custom string processing.