3.1 Biểu thức lồng nhau
Trong Template Literals, bạn có thể dùng bất kỳ biểu thức nào, bao gồm gọi hàm, toán tử điều kiện và Template Literals lồng nhau.
Ví dụ:
Trong biểu thức ${a + b} thực hiện phép toán và kết quả được đặt vào chuỗi result.
const a = 5;
const b = 10;
const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."
3.2 Template Literals lồng nhau
Template Literals có thể được lồng vào nhau, cho phép tạo ra các chuỗi phức tạp.
Ví dụ:
Lời gọi hàm greet() của đối tượng user được lồng vào trong Template Literals message.
const user = {
name: 'Bob',
age: 25,
greet() {
return `Hello, ${this.name}!`;
}
};
const message = `${user.greet()} You are ${user.age} years old.`;
console.log(message); // "Hello, Bob! You are 25 years old."
3.3 Tagged Templates
Tagged Templates cho phép gọi hàm để xử lý các chuỗi. Điều này cho phép thực hiện các thao tác bổ sung với chuỗi, như quốc tế hóa, chèn HTML an toàn, v.v.
Cú pháp:
function tag(strings, ...values) {
// xử lý chuỗi và giá trị
return kết quả;
}
const result = tag`Chuỗi mẫu với ${biến số}`;
Ví dụ:
Hàm highlight() xử lý các chuỗi và giá trị, bọc các giá trị trong HTML tags <span> với class highlight.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;
console.log(message);
// "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."
3.4 Chèn giá trị an toàn
Template Literals giúp tránh một số vấn đề bảo mật phổ biến, như XSS (Cross-Site Scripting), bằng cách chèn giá trị một cách an toàn. Điều này đặc biệt hữu ích khi chèn dữ liệu người dùng vào HTML.
Ví dụ:
Hàm safeHTML() thay thế các ký tự nguy hiểm trong giá trị, ngăn chặn các cuộc tấn công XSS.
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;
console.log(message);
// "User input: <script>alert("XSS")</script>"
GO TO FULL VERSION