Template Literal

String yang lebih pintar

Template literal memakai backtick (bukan kutip) dan membuka dua kemampuan baru: menyisipkan expression dengan ${} dan menulis string multi-baris.

let nama = "Rizky";
let umur = 17;

// cara lama: sambung dengan +
let lama = "Halo, " + nama + ". Umurmu " + umur + " tahun.";

// template literal: lebih bersih
let baru = `Halo, ${nama}. Umurmu ${umur} tahun.`;
console.log(baru);

Di dalam ${} boleh expression apa pun, bukan cuma variabel:

let a = 5, b = 3;
console.log(`Hasil: ${a + b}, status: ${a > b ? "a menang" : "b menang"}`);

Multiline tanpa trik

String biasa tidak bisa pindah baris langsung. Template literal bisa:

let pesan = `Halo Rizky,
selamat datang di
belajar JavaScript!`;
console.log(pesan);

Baris barunya ikut tersimpan apa adanya. Ini berguna untuk template HTML atau pesan panjang.

Contoh nyata: membangun HTML

let produk = [
  { nama: "Kopi", harga: 15000 },
  { nama: "Teh", harga: 8000 }
];

let html = produk.map(p => `<li>${p.nama}: Rp${p.harga}</li>`).join("");
console.log(html);
// <li>Kopi: Rp15000</li><li>Teh: Rp8000</li>

Pola ini sangat umum untuk me-render list dari data.

Catatan teknis: Di dalam template literal, karakter $ yang diikuti { memulai interpolasi. Untuk menulis teks literal ${, escape dollarnya: ${. Backtick di dalam template literal juga harus di-escape: `. Aturan yang sama berlaku saat menulis contoh ini di dokumentasi.

Tagged template: sekilas

Template literal bisa diberi "tag", yaitu fungsi yang memproses potongan stringnya. Ini fitur lanjutan yang dipakai library seperti styled-components:

function sorot(strings, ...values) {
  return strings.map((s, i) =>
    s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
  ).join("");
}

let nama = "Rizky";
console.log(sorot`Halo ${nama}, selamat datang`);
// "Halo [Rizky], selamat datang"

Fungsi tag menerima potongan string statis dan nilai interpolasi secara terpisah, lalu bisa mengolahnya sesuka hati. Kamu tidak wajib memakai ini sekarang, tapi senang mengetahui template literal lebih dalam dari sekadar interpolasi.

Kesimpulan

Untuk string dinamis, template literal hampir selalu lebih baik daripada penggabungan +. Lebih mudah dibaca, lebih mudah ditulis, dan mendukung multi-baris. Jadikan ini default untuk string yang butuh interpolasi.