• Apa Itu Template Literals?
• Sintaks Dasar
• Interpolasi Variable
• Expression di Dalam Template Literals
• Multiline String (Tanpa \n)
• HTML Fragments
• Kesimpulan

Halo teman-teman semuanya, pada artikel kali ini kita akan belajar tentang salah satu fitur JavaScript ES6 yang super membantu, yaitu Template Literals. Fitur ini bikin kita lebih mudah mengelola string, menyisipkan variable, bahkan membuat multiline string tanpa ribet.

Apa Itu Template Literals?

Template Literals adalah cara baru untuk membuat string di JavaScript yang:

• Lebih fleksibel,
• Mudah dibaca,
• Mendukung interpolasi (menyisipkan variable ke dalam string),
• Dan mendukung string multi-baris tanpa perlu \n.

Kita menggunakan backtick (``) bukan tanda kutip (') atau (") biasa.

Sintaks Dasar

const nama = "Dian";

const kalimat = `Halo, nama saya ${nama}`;

console.log(kalimat);
// Output: Halo, nama saya Dian

• Gunakan backtick ( ` ) untuk membuat string.
• Untuk memasukkan variable atau ekspresi, gunakan ${}.

Interpolasi Variable

Kita bisa menyisipkan variable di dalam string dengan ${}:

const nama = "Andi";
const umur = 22;

const perkenalan = `Halo, saya ${nama}, umur saya ${umur} tahun.`;

console.log(perkenalan);

Expression di Dalam Template Literals

Bukan cuma variable, kita juga bisa menjalankan ekspresi di dalam ${}:

const a = 5;
const b = 10;

console.log(`Hasil penjumlahan: ${a + b}`);
// Output: Hasil penjumlahan: 15

Multiline String (Tanpa \n)

Biasanya untuk membuat string banyak baris, kita harus pakai \n. Dengan template literals, cukup tulis biasa:

const bio = `Nama: Siti
Umur: 20
Asal: Yogyakarta`;

console.log(bio);

Output:

Nama: Siti
Umur: 20
Asal: Yogyakarta

HTML Fragments

Kalau bikin string HTML di JavaScript, pakai template literals jauh lebih enak:

const title = "Belajar JS";
const content = "Template Literals itu keren!";

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

console.log(html);

Kesimpulan

Template Literals memudahkan kita untuk membuat string yang dinamis, menyisipkan variable atau ekspresi ke dalam string, membuat string multi-baris dengan lebih mudah, dan membuat template HTML di JavaScript.

Pada artikel berikutnya, kita semua akan belajar tentang Default Parameters di dalam JavaScript.

Terima Kasih