JavaScript Extended #23: Template Literals & String Modern

• 06/01/2025
• ariq fadhil
• 7

1. Apa itu Template Literals?

Template literals adalah fitur modern JavaScript untuk membuat string yang lebih fleksibel dan mudah dibaca. Template literals menggunakan tanda backtick (`) bukan kutip biasa.

2. String Interpolation

Dengan template literals, kita bisa menyisipkan variabel langsung ke dalam string menggunakan ${}.

const nama = "Ariq";
const pesan = `Halo ${nama}, selamat belajar JavaScript`;
console.log(pesan);

3. Multi-line String

Template literals mendukung string multi-baris tanpa perlu karakter \n.

const html = `
  <div>
    <h1>Belajar JavaScript</h1>
    <p>Materi modern JavaScript</p>
  </div>
`;

4. Expression di Dalam String

const a = 10;
const b = 5;

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

5. Method String Modern

• includes()
• startsWith()
• endsWith()
• repeat()
• trim()

const text = " Belajar JavaScript ";

console.log(text.trim());
console.log(text.includes("JavaScript"));

6. Ringkasan

• Template literals mempermudah pembuatan string dinamis
• Mendukung interpolation dan multi-line string
• String modern memiliki banyak method yang memudahkan manipulasi teks

Di part berikutnya, kita akan membahas modular JavaScript dengan ES Modules.