Memahami Template Literal di JavaScript.

Template literal (ES6) adalah cara modern menulis string di JavaScript memakai tanda backtick, menggantikan kebiasaan lama menggabung string dengan operator +.

Interpolasi Variabel

const nama = "Fajar";
const skor = 95;

const pesan = `${nama} mendapat skor ${skor}`;
console.log(pesan); // "Fajar mendapat skor 95"

Di dalam ${ }, bisa diisi ekspresi apapun, tidak hanya variabel tunggal.

const harga = 50000;
const jumlah = 3;

console.log(`Total: Rp${(harga * jumlah).toLocaleString("id-ID")}`);
// "Total: Rp150.000"

String Multi-baris

const email = `Halo ${nama},

Terima kasih telah mendaftar.
Salam hangat,
Tim Dukungan`;

Sebelum template literal, string multi-baris harus disusun manual memakai karakter \n atau penggabungan berulang.

Nested Template Literal

Template literal bisa disarangkan satu sama lain, berguna untuk logika kondisional di dalam string.

const status = "aktif";

const label = `Status: ${status === "aktif" ? `✅ ${status}` : `❌ ${status}`}`;
console.log(label); // "Status: ✅ aktif"

Tagged Template

Fitur lanjutan template literal memungkinkan sebuah fungsi memproses string dan nilai interpolasinya secara terpisah, disebut tagged template.

function sensor(strings, ...nilai) {
  return strings.reduce((hasil, str, i) => {
    const nilaiSensor = nilai[i] ? "***" : "";
    return `${hasil}${str}${nilaiSensor}`;
  }, "");
}

const noHp = "081234567890";
console.log(sensor`Nomor HP: ${noHp}`);
// "Nomor HP: ***"

Tagged template banyak dipakai pustaka modern seperti styled-components untuk memproses CSS di dalam JavaScript.

Template Literal untuk Membangun HTML

const produk = { nama: "Jam Tangan", harga: 750000 };

const kartuHtml = `
  <div class="kartu-produk">
    <h3>${produk.nama}</h3>
    <p>Rp${produk.harga.toLocaleString("id-ID")}</p>
  </div>
`;

Pola ini sering dipakai saat membangun tampilan dinamis tanpa framework, meski untuk aplikasi yang lebih besar biasanya digantikan oleh JSX atau template engine framework tertentu.

Kesimpulan

Template literal menyederhanakan penggabungan string, mendukung teks multi-baris secara natural, dan bisa diperluas lewat tagged template untuk kebutuhan khusus seperti memproses input sensitif atau membangun CSS dinamis. Fitur ini menjadi standar de facto untuk bekerja dengan string di JavaScript modern.