Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)

---

Ta đã đề cập một cách ngắn gọn về các ký tự mẫu , nhưng chúng có một tính năng bổ sung mà ta chưa thảo luận: thẻ. Bạn có thể gắn thẻ các ký tự mẫu của bạn bằng một hàm sẽ được gọi và có thể hoạt động như một loại bộ xử lý trước trên nội dung của ký tự mẫu.

Dưới đây là một ví dụ điển hình về chữ mẫu:

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = `Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm Benedict and I'm busy at being awesome.

Bây giờ, hãy gắn thẻ chữ bằng một hàm vô dụng :

function useless(strings, ...values) {
  return 'I render everything useless.';
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = useless`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// I render everything useless.

Rõ ràng là ở trên không có bất kỳ công dụng nào, nhưng nơi nó bắt đầu có nhiều sức mạnh hơn là khi ta sử dụng các chuỗi và giá trị để xây dựng khuôn mẫu theo nghĩa đen với một số xử lý.

Với ví dụ hiện tại của ta :

• string là một mảng có 3 giá trị: Hi! Tôi , và tôi bận lúc và .
• giá trị là một mảng có 2 giá trị nội suy cho các biến name và occupation . Các giá trị này được truyền dưới dạng tham số bổ sung cho hàm được gắn thẻ, nhưng ở đây ta sử dụng các tham số còn lại để tập hợp tất cả các tham số bổ sung vào một mảng giá trị .

Luôn luôn có thêm một giá trị chuỗi sau đó có các giá trị nội suy. Với ví dụ của ta , nếu không có dấu chấm ở cuối câu then, thì một chuỗi trống sẽ là giá trị cuối cùng của mảng chuỗi , để đáp ứng thực tế là cần phải có thêm một giá trị chuỗi.

Được trang bị kiến thức đó, do đó, ta có thể tạo một hàm thẻ cho chuỗi ký tự thực sự làm điều gì đó:

function uppercase(strings, ...values) {
  let newStr = '';

  for (let i = 0; i < strings.length; i++) {
    if (i > 0) {
      newStr += values[i-1].toUpperCase();
    }
    newStr += strings[i];
  }

  return newStr;
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = uppercase`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm BENEDICT and I'm busy at BEING AWESOME.

---

---

Các tin liên quan

Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31