Hướng dẫn Tạo chuỗi HTML dễ dàng với Template String của ES6 trong javaScript

[PVS]

Tạo chuỗi HTML dễ dàng với Template String của ES6 trong javaScript

Một cách tạo ra chuỗi kết hợp dữ liệu và mã đánh dấu HTML gọn gàng hơn, không cần phải tạo ra nhiều dòng chuỗi, không cần phải cộng chuỗi để nối chuỗi với rất nhiều dấu nháy như trước, không cần phải sử dụng mã ASCII để xuống dòng.

Giờ đây với một tính năng mới còn được gọi là template literals được cập nhật trong bản ECMAScript 6 ta có thể tạo ra mã đánh dấu HTML trong chuỗi như viết trong tài liệu HTML, thao tác với dữ liệu trở nên gọn gàng hơn, dễ nhìn hơn và hợp thời hơn. Ví dụ:

const person = {
    name: 'Khuong',
    city: 'Ho Chi Minh'
}
const markup = `
<div>
    <h1>Hello ${person.name}</h1>
    <p class="city">${person.city}</p>
</div>
`;

Nó cũng có thể tạo ra các node elements khi được xét bởi thuộc tính innerHTML vào DOM. Ta hoàn toàn có thể loop các mảng dữ liệu lồng bên trong template string tạo ra một cấu trúc đẹp. Ví dụ:

const customers = [
    { name: 'Khuong', city: 'Ho Chi Minh' },
    { name: 'Phuong', city: 'Da Nang' }
];
const markup = `
<ul>
    ${customers.map(customer => `<li>${customer.name} ${customer.city} city</li>`)}
</ul>
`;

Cũng có thể sử dụng các câu điều kiện trong template string. Ví dụ:

const markup = `
<div>
    <h1>Hello ${person.name}</h1>
    <p class="city">${person.city ? `${person.city}` : 'empty'}</p>
</div>
`;

Template string trong ES6 là một cải tiến rất thú vị bổ sung một cấu trúc tốt, nhằm nâng cao chất lượng viết code javaScript, giảm dần việc sử dụng các thư viện hay template engine để tạo ra một cấu trúc dễ phát triển và duy trì nhưng không đồng nhất.

Chúc các bạn thành công.

Nguồn: sothichweb.com​