Bài 6: Template Literals trong ES6

Trước đây, trong javascript thuần chúng ta thường sử dụng dấu nháy ' hoặc nháy " để khai báo giá trị của các biến là chuỗi.

VD: Khai báo biến là chuỗi.

var slogan = "Học Lập trình online";
var website = 'Toidicode.com';

Nhưng sau khi các bạn đọc xong bài này thì sẽ update thêm được một kiểu khai báo biến mới với sự hỗ trợ tốt hơn,… Và kiểu khai báo này gọi là Template Literals.

1, Template Literals.

Temaplate Literals là một cú pháp mới dùng để khai báo biến, được thêm vào trong phiên bản ES6. Khi sử dụng cú pháp này các bạn có thể:

• Khai báo biến nhiều dòng một cách hết sức đơn giản. (Nếu bạn sử dụng cách truyền thống thì sẽ không thể nào khai báo được một biến mà có sử dụng ký tự xuống dòng (xem), nhưng với template thì có thể (xem VD2) ).
• Binding biến vào trong template một cách dễ dàng.

Và để khai báo Template Literals thì các bạn cũng sử dụng cú pháp như trước. Nhưng chỉ có một điều duy nhất là khai thay vì khai báo bằng dấu ' hoặc " thì bạn đổi bằng dấu `:

var variableName = `content`; 

Và nếu như bạn muốn binding một biến khác vào trong nội dung của Template Literals thì bạn sử dụng cú pháp sau:

${variable}

Trong đó: variable là tên của biến hoặc hằng mà bạn muốn binding vào.

2, Các Ví Dụ.

VD1: Khai báo biến dưới dạng template literals.

var content = `Học lập trình online miễn phí Toidicode.com`;
alert(content);

VD2: Khai báo biến nhiều dòng dưới dạng template literals một cách đơn giản.

var content = `

        Học lập trình online miễn phí
        Toidicode.com
    
 `;
document.write(content);

VD3: Binding giá trị của biến vào template literals.

var website = "Toidicode.com";
var content = `

    Học lập trình online miễn phí
    ${website}
    
 `;
document.write(content);

VD4: Bìnding giá trị của mảng vào trong template literals.

const website = ["Toidicode.com","Thanhtai.info"];
var content = `

    Học lập trình online miễn phí
    ${website}
    
 `;
document.write(content);

VD5: Tương tự chúng ta cũng có thể làm với object.

const website = {
    blog: "toidicode.com",
    resume: "thanhtai.info"
};
var content = `

    Học lập trình online miễn phí
    ${website.blog}
 `;
document.write(content);

3, Lời kết.

Template Literals khá hay đúng không mọi người. Từ hồi nó được hỗ trợ mình nhàn hẳn khi sử lý các biến có nội dung dài 😀