Javascript - Template Literals

Template Literals

Pengenalan

• Ditulis menggunakan backtick (`) bukan tanda kutip
• Mendukung interpolasi variabel dengan ${}
• Mendukung string multi-baris tanpa escape character

Fitur Utama

1. Interpolasi Variabel

   const nama = 'Budi';
   console.log(`Halo, ${nama}!`); // Halo, Budi!

2. Ekspresi dalam String

   const a = 5, b = 10;
   console.log(`Hasil: ${a} + ${b} = ${a + b}`);
   // Hasil: 5 + 10 = 15

3. Multi-line Strings

   const pesan = `Baris pertama
   Baris kedua
   Baris ketiga`;

4. Tagged Templates

   function highlight(strings, ...values) {
     return strings.reduce((result, string, i) => 
       `${result}${string}${values[i] ? `<mark>${values[i]}</mark>` : ''}`
     , '');
   }
   
   const nama = 'Budi';
   const umur = 25;
   console.log(highlight`Halo, ${nama} berumur ${umur} tahun.`);

Keuntungan

• Kode lebih bersih dan mudah dibaca
• Menghindari concatenation string yang berantakan
• Mendukung HTML templates yang kompleks
• Lebih aman dari serangan XSS dibanding concatenation biasa

Contoh Praktis

// Membuat template HTML
function createUserCard(user) {
  return `
    <div class="user-card">
      <h2>${user.name}</h2>
      <p>Email: ${user.email}</p>
      <p>Bergabung pada: ${new Date(user.joinDate).toLocaleDateString()}</p>
      ${user.isAdmin ? '<span class="admin-badge">Admin</span>' : ''}
    </div>
  `;
}

// SQL query yang lebih aman
const userId = 42;
const query = `
  SELECT * FROM users
  WHERE id = ${userId}
  AND status = 'active'
`;

Perhatian

• Hati-hati dengan input pengguna untuk menghindari XSS
• Gunakan library template engine untuk template yang kompleks
• Beberapa browser lama mungkin membutuhkan polyfill