Apakah template literals?

Question

Accepted Answer

**Template literals** menggunakan backticks (`` ` ``) dan menambahkan dua hal yang tidak dimiliki tanda petik string biasa: **interpolation** ekspresi dan string **multi-line**. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Sebelum template literals, Anda harus menulis `"Hi " + name + ", " + count + ...` — verbose dan rawan kesalahan. Interpolation terbaca jauh lebih baik. ## Tagged templates (advanced) Fungsi yang ditempatkan sebelum backticks menerima bagian string dan nilai yang diinterpolasi, memungkinkannya untuk memprosesnya: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Ini memberdayakan library seperti **styled-components** dan pembantu escaping SQL/HTML yang aman. ## Mengapa ini penting Template literals adalah cara standar untuk membangun string hari ini — interpolation yang dapat dibaca, teks multi-line yang mudah, dan hook (tagged templates) untuk DSL.