Template literals là gì?

Question

Accepted Answer

**Template literals** dùng dấu backtick (`` ` ``) và thêm hai thứ mà chuỗi với dấu nháy thông thường thiếu: **nội suy (interpolation)** các biểu thức và chuỗi **nhiều dòng**. ```js const name = "Ann"; const count = 3; // nội suy: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // bất kỳ biểu thức nào cũng được, không chỉ biến const total = `Total: ${(count * 1.1).toFixed(2)}`; // nhiều dòng — giữ nguyên các ngắt dòng const html = `

${name}

`; ``` Trước khi có template literals bạn phải viết `"Hi " + name + ", " + count + ...` — dài dòng và dễ lỗi. Nội suy dễ đọc hơn nhiều. ## Tagged templates (nâng cao) Một hàm đặt trước dấu backtick sẽ nhận các phần chuỗi và các giá trị được nội suy, cho phép nó xử lý chúng: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Điều này là nền tảng cho các thư viện như **styled-components** và các hàm escape SQL/HTML an toàn. ## Tại sao điều này quan trọng Template literals là cách chuẩn để xây chuỗi ngày nay — nội suy dễ đọc, văn bản nhiều dòng dễ dàng, và một móc nối (tagged templates) cho các DSL.