ES6 Template Literal

Template Literal Là Gì

Template literal là tính năng mới trong ECMAScript 6 cho phép lập trình viên có thể nhúng biểu thức JavaScript (ví dụ như giá trị của biến, hoặc kết quả của một phép toán...) bên trong chuỗi string một cách dễ dàng.

Sử dụng phiên bản trước của ECMAScript thì việc nối chuỗi với giá trị của một biến hoặc biểu thức thường sử dụng toán tử + và chúng ta sẽ thường được thấy những đoạn code tương tự sau xuất hiện trong source code:

var spiderMan = {
    name: "Peter",
    age: 25
};

var superMan = {
    name: "Clark",
    age: 200
};

console.log("Hello, " + superMan.name
    + ", my name is " + spiderMan.name
    + ", I'm " + spiderMan.age + " years old."
    + " And you're " + superMan.age + " years old."
    + " Do you want to have a fight!!!");

Đoạn code trên khi chạy sẽ hiển thị kết quả sau trong tab console:

Hello, Clark, my name is Peter, I'm 25 years old. And you're 200 years old. Do you want to have a fight!!!

Sử Dụng template literal sẽ giúp chúng ta hạn chế sử dụng toán tử + như trên và source code nhìn sẽ gọn hơn.

Cú Pháp Template Literal

Template literal có cú pháp như sau:

`Text ${javascript_expression} other text...`

Trong đó javascript_expression là một biểu thức JavaScript.

Ví dụ:

let firstName = "Peter";
let lastName = "Parker";

console.log(`Hello everyone! My name is ${firstName} ${lastName}.`);

Kết quả trả về:

Hello everyone! My name is Peter Parker.

Một ví dụ khác:

let toDay = new Date();

console.log(`Hôm nay là ngày ${toDay.getDate()} tháng ${toDay.getMonth()} năm ${toDay.getYear()}`);

Đoạn code trên khi chạy sẽ hiển thị kết quả sau trong tab console:

Hôm nay là ngày 13 tháng 10 năm 117

Lưu ý: Đối với các ký tự đặc biệt như xuống dòng, tab... thì chúng ta vẫn sử dụng cú pháp thoát ký tự đặc biệt trong JavaScript như thông thường. Ví dụ \n để xuống dòng, \t để thêm tab...

Câu Hỏi

Chưa có câu hỏi nào cho bài hướng dẫn này
Đặt Câu Hỏi

Mời Bạn Bè

Gửi email mời bạn bè

Viết Cùng Tác Giả

Bạn biết về chủ đề này và muốn tham gia viết cùng tác giả?