JavaScript - Tagged Templates

Xin chào, các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của Tagged Templates. Đừng lo lắng nếu bạn chưa từng nghe về chúng trước đây - đến cuối bài học này, bạn sẽ trở thành một chuyên gia trong việc sử dụng tagged templates!

Tagged Templates Là Gì?

Tagged templates là một tính năng mạnh mẽ được giới thiệu trong ES6 (ECMAScript 2015) cho phép bạn phân tích các literal template bằng một hàm. Bây giờ, tôi biết điều đó có thể听起来 hơi đáng sợ, nhưng hãy nghĩ về nó như việc赐 cho các chuỗi template siêu năng lực!

Nói đơn giản hơn, tagged templates cho phép bạn xử lý một chuỗi template trước khi nó được hiển thị cuối cùng. Đó giống như có một trợ lý cá nhân có thể chỉnh sửa tin nhắn của bạn trước khi bạn gửi chúng đi.

Cú Pháp Cơ Bản

Hãy bắt đầu với cú pháp cơ bản:

function myTag(strings, ...values) {
// Đ魔法 của bạn ở đây
}

const result = myTag`Hello, ${name}!`;

Trong ví dụ này, myTag là hàm tagged template của chúng ta. Nó nhận hai loại đối số:

1. Một mảng các literal string
2. Các giá trị chèn (những cái trong ${})

Tại Sao Sử Dụng Tagged Templates?

Bạn có thể đang tự hỏi, "Tại sao tôi nên phiền toái với tagged templates?" Well, để tôi kể cho bạn một câu chuyện ngắn.

Ngày xửa ngày xưa, có một nhà phát triển trẻ tên là Alex. Alex đang xây dựng một ứng dụng tin nhắn và muốn đảm bảo rằng không ai có thể gửi HTML độc hại trong tin nhắn của họ. Tagged templates đã đến cứu giúp! Alex đã sử dụng chúng để làm sạch đầu vào của người dùng và ngăn chặn các rủi ro an ninh tiềm ẩn.

Tagged templates rất hữu ích cho:

• Làm sạch đầu vào của người dùng
• Quốc tế hóa (i18n)
• Định dạng (như trong styled-components cho React)
• Và nhiều hơn nữa!

Ví Dụ về Tagged Templates

Hãy cùng nhìn vào một số ví dụ để thấy tagged templates trong hành động!

Ví Dụ 1: Một Lời Chào Đơn Giản

function greet(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// Output: Hello, ALICE!

Trong ví dụ này, hàm greet của chúng ta lấy tên và chuyển đổi nó thành chữ in hoa. Mảng strings chứa ["Hello, ", "!"], và mảng values chứa ["alice"].

Ví Dụ 2: Tránh HTML

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (values[i] ? escapeHtml(values[i]) : '');
}, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// Output: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

Ví dụ này cho thấy chúng ta có thể sử dụng tagged templates để escape HTML có thể gây hại. Hàm safeHtml thay thế các ký tự đặc biệt bằng các tương đương HTML của chúng.

Ví Dụ 3: Định Dạng với Tagged Templates

function css(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] || '');
}, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
color: ${color};
font-size: ${fontSize};
`;

console.log(styles);
// Output:
//   color: red;
//   font-size: 20px;

Ví dụ này minh họa cách tagged templates có thể được sử dụng để định dạng, tương tự như cách chúng được sử dụng trong các thư viện như styled-components.

Sử Dụng Nâng Cao: Phương Thức Tagged Template

Tagged templates cũng có thể có phương thức gắn kèm. Hãy nhìn vào một ví dụ:

function currency(strings, ...values) {
const result = strings.reduce((acc, str, i) => {
return acc + str + (values[i] || '');
}, '');

return {
toString() {
return result;
},
USD() {
return '$' + result;
},
EUR() {
return '€' + result;
}
};
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // Output: 100
console.log(formatted.USD()); // Output: $100
console.log(formatted.EUR()); // Output: €100

Trong ví dụ này, tagged currency trả về một đối tượng với các phương thức, cho phép định dạng linh hoạt.

Kết Luận

Tagged templates là một tính năng mạnh mẽ trong JavaScript cho phép xử lý và manipulates các chuỗi phức tạp. Chúng không chỉ là một cách thời trang để nối chuỗi - chúng mở ra thế giới của các khả năng để tạo ra mã an toàn hơn, linh hoạt hơn và biểu cảm hơn.

Nhớ rằng, giống như bất kỳ công cụ mạnh mẽ nào khác, tagged templates nên được sử dụng một cách审慎. Chúng rất hữu ích cho các trường hợp cụ thể như làm sạch, quốc tế hóa, hoặc tạo ngôn ngữ domain-specific, nhưng đối với việc chèn chuỗi đơn giản, template literals thông thường thường đủ dùng.

Bây giờ bạn đã học về tagged templates, tại sao không thử tạo riêng của bạn? Bắt đầu từ những điều đơn giản, có thể là một hàm định dạng cơ bản, và dần dần làm cho nó phức tạp hơn. Chúc mừng coding, các bậc thầy JavaScript tương lai!

Phương Thức	Mô Tả
strings.raw	Cung cấp quyền truy cập vào các chuỗi thô trong literal template
String.raw	Một hàm tagged built-in cho việc lấy dạng chuỗi thô của literal template

Credits: Image by storyset