Template String trong ES6, giễ ràng tạo chuỗi HTML với javaScript

  • JavaScript
  • 01 tháng 11 2016
  • bởi Văn Khương
  • 0 Comments

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, giễ 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 sé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 sring 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.

Tham khảo wesbos, developer.mozilla

Tags: ES6
  • Chia sẻ
comments powered by Disqus