Template Literals trong JavaScript
Template literals là một cách mới để làm việc với chuỗi trong JavaScript, được giới thiệu trong ES6 (ECMAScript 2015). Chúng cung cấp một cú pháp thuận tiện và linh hoạt hơn so với chuỗi truyền thống, đặc biệt là khi cần chèn biến hoặc biểu thức vào chuỗi.
Cú pháp của Template Literals
Template literals được bao quanh bởi dấu backticks (` `), thay vì dấu ngoặc kép đơn (' ') hoặc kép (" ").
Chèn Biến và Biểu thức
Template literals cho phép chèn các biến và biểu thức trực tiếp vào chuỗi bằng cách sử dụng cú pháp ${expression}.
Ví dụ
const name = "John";
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: My name is John and I am 30 years old.
Trong ví dụ trên, các biến name và age được chèn trực tiếp vào chuỗi mà không cần sử dụng phép nối chuỗi (concatenation) như trong cách viết truyền thống.
Biểu thức
Bạn cũng có thể chèn các biểu thức phức tạp vào template literals.
const a = 5;
const b = 10;
console.log(`The sum of ${a} and ${b} is ${a + b}.`); // Output: The sum of 5 and 10 is 15.
Nhiều Dòng (Multiline Strings)
Template literals hỗ trợ viết chuỗi nhiều dòng mà không cần sử dụng ký tự xuống dòng (\n).
Ví dụ
const multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
Output:
This is a string
that spans across
multiple lines.
Thẻ Template (Tagged Templates)
Thẻ template (tagged templates) cho phép bạn xử lý template literals thông qua một hàm. Hàm này có thể thao tác với các phần tử chuỗi và giá trị biến chèn vào trước khi tạo chuỗi cuối cùng.
Ví dụ
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => `${result}${str}<strong>${values[i] || ''}</strong>`, '');
}
const name = "Alice";
const age = 25;
const message = highlight`My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: My name is <strong>Alice</strong> and I am <strong>25</strong> years old.
Raw Strings
Bạn có thể truy cập vào phiên bản "thô" của chuỗi (không bị xử lý escape sequences) thông qua String.raw.
Ví dụ
const rawString = String.raw`This is a raw string with escape sequences like \n and \t.`;
console.log(rawString); // Output: This is a raw string with escape sequences like \n and \t.
Kết luận
Template literals cung cấp một cú pháp linh hoạt và mạnh mẽ để làm việc với chuỗi trong JavaScript. Chúng giúp việc chèn biến và biểu thức trở nên dễ dàng hơn, hỗ trợ chuỗi nhiều dòng, và cung cấp khả năng mở rộng thông qua thẻ template và chuỗi thô. Template literals giúp mã nguồn dễ đọc và bảo trì hơn, đặc biệt là khi làm việc với các chuỗi phức tạp.
Comments