Apa itu template literals?

Question

Accepted Answer

**Template literals** menggunakan backtick (`` ` ``) dan menambahkan dua hal yang tidak dimiliki tanda kutip string biasa: **interpolasi** 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. Interpolasi jauh lebih mudah dibaca. ## Tagged templates (lanjutan) Sebuah fungsi yang ditempatkan sebelum backtick menerima bagian string dan nilai yang diinterpolasi, memungkinkannya memproses mereka: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Ini mendukung perpustakaan seperti **styled-components** dan pembantu pelarian SQL/HTML yang aman. ## Mengapa ini penting Template literals adalah cara standar untuk membangun string hari ini — interpolasi yang dapat dibaca, teks multi-line yang mudah, dan hook (tagged templates) untuk DSL.