Template Literals

Template Literals là một tính năng mạnh mẽ trong JavaScript, được giới thiệu từ phiên bản ECMAScript 6 (ES6). Template Literals cho phép bạn tạo ra các chuỗi (string) phức tạp một cách dễ dàng và linh hoạt hơn so với cách tạo chuỗi thông thường.

Các đặc điểm chính của Template Literals:

1. Dấu gạch chéo ngược (``) để bao quanh:

• Template Literals được bao quanh bởi dấu gạch chéo ngược (``), thay vì dấu ngoặc kép (" hoặc ') như chuỗi thông thường.

const greeting = `Hello, world!`;Interpolation (Nội suy biến):

• Bạn có thể nhúng biến hoặc biểu thức JavaScript trực tiếp vào chuỗi bằng cách sử dụng ${}.

const name = "Alice";
const age = 30;
const greeting = `My name is ${name} and I am ${age} years old.`;
console.log(greeting); // My name is Alice and I am 30 years old.

• Bên trong ${}, bạn có thể viết bất kỳ biểu thức JavaScript nào, không chỉ là biến.

const a = 10;
const b = 20;
const result = `The sum of a and b is ${a + b}.`;
console.log(result); // The sum of a and b is 30.

2. Multi-line Strings (Chuỗi nhiều dòng):

Template Literals cho phép tạo ra các chuỗi nhiều dòng một cách dễ dàng, mà không cần sử dụng ký tự đặc biệt như \n.

const multiLineString = `This is a string
that spans multiple
lines.`;
console.log(multiLineString);
/*
Output:
This is a string
that spans multiple
lines.
*/

3. Tagged Templates:

Tagged Templates là một tính năng nâng cao của Template Literals, cho phép bạn viết một hàm (tag function) để xử lý Template Literals. Hàm này nhận vào các phần tử cố định của chuỗi và các giá trị được nội suy, rồi trả về một chuỗi kết quả.

function highlight(strings, ...values) {
    return strings.reduce((acc, str, i) => `${acc}${str}<strong>${values[i] || ''}</strong>`, '');
}

const name = "Alice";
const age = 30;
const result = highlight`My name is ${name} and I am ${age} years old.`;
console.log(result); // My name is <strong>Alice</strong> and I am <strong>30</strong> years old.

Trong ví dụ trên, hàm highlight được gọi với Template Literal, và nó xử lý để bọc các giá trị nội suy (name và age) bằng thẻ <strong>.

4. Escaping trong Template Literals:

Để sử dụng ký tự backtick () bên trong Template Literal, bạn cần escape nó bằng cách sử dụng backslash (`).

const message = `This is a backtick: \``;
console.log(message); // This is a backtick: `

Lợi ích của Template Literals:

• Dễ dàng tạo ra chuỗi phức tạp: Kết hợp biến, biểu thức và chuỗi nhiều dòng một cách tự nhiên.
• Giảm thiểu lỗi: So với việc nối chuỗi (concatenation) truyền thống bằng cách sử dụng +, Template Literals giúp mã nguồn dễ đọc hơn và ít có khả năng gây lỗi cú pháp.
• Sử dụng linh hoạt: Đặc biệt hữu ích trong việc tạo HTML, SQL query, hoặc các chuỗi định dạng phức tạp khác.

Template Literals là một công cụ rất hữu ích trong JavaScript, giúp mã nguồn trở nên sáng sủa và dễ bảo trì hơn, đặc biệt khi làm việc với chuỗi văn bản phức tạp.