Template Literals (Template Strings) trong ES6

Tram Ho

1. Giới thiệu

Template Literals (hay còn gọi là Template Strings) là một tính năng mới của ES2015 (ES6) cho phép bạn làm việc với chuỗi theo một cách mới lạ hơn so với phiên bản ES5 trở xuống. Nó bổ sung nhiều tính năng mới mạnh mẽ để giúp cho việc tạo các chuỗi nhiều dòng (multi-line strings) hoặc nhúng biểu thức vào trong chuỗi một cách dễ dàng. Ngoài ra, Tagged Templates Literals là một tính năng nâng cao của Template Literals cho phép bạn thực hiện các thao tác trên các biểu thức trong chuỗi.

Tất cả những tính năng thú vị đó giúp cho bạn có thêm các tùy chọn khi thao tác với chuỗi, cho phép bạn dễ dàng tạo các chuỗi động có thể sử dụng cho URL hoặc các chức năng tùy chỉnh ở các thành phần HTML.

2. Cú pháp (Syntax)

Như các bạn đã thấy ở trên, các Template Literals được bao bởi ký tự dấu gạch ngược backtick () thay vì dấu nháy đơn hoặc nháy kép

Template Literals có thể chứa “trình giữ chỗ” (placeholders). Chúng được biểu thị bằng dấu đô la và dấu ngoặc nhọn ${expression}

Dấu có thể được escape bằng dấu :

=== ‘`’ // –> true

Bạn có thể đặt bất cứ biểu thức JavaScript nào bên trong ${}

Kết quả thu được:

image.png

Kết quả thu được:

image.png

3. Multi-line Strings

Bất kỳ ký tự dòng mới (newline characters) nào được chèn vào source đều là một phần của Template Literals.

Nếu bạn sử dụng các chuỗi thông thường, bạn sẽ phải sử dụng cú pháp sau để nhận các chuỗi nhiều dòng:

Khi sử dụng Template Literals, bạn có thể làm điều tương tự như sau:

4. Biểu thức nội suy (Expression Interpolation)

Để nhúng các biểu thức trong các chuỗi thông thường, bạn sẽ sử dụng cú pháp sau:

Bây giờ, với Template Literals, bạn có thể làm cho nó dễ đọc hơn như sau:

5. Các mẫu lồng nhau (Nesting Templates)

Trong một số trường hợp, việc lồng một mẫu là cách dễ nhất (và có lẽ là dễ đọc hơn) để có được các chuỗi có thể định cấu hình. Với Backticked Template, thật đơn giản để cho phép các backticks bên trong bằng cách sử dụng chúng bên trong placeholders ${}.

6. Tagged Templates

Một dạng “cao cấp” hơn của Template Literals chính là Tagged Templates.

Tags cho phép bạn phân tích cú pháp Template Literals với một function. Đối số đầu tiên của một tag function chứa một mảng các giá trị chuỗi. Các đối số còn lại liên quan đến các biểu thức (expressions)

Tag function có thể thực hiện bất kỳ thao tác nào trên các đối số này mà bạn muốn và trả về chuỗi đã thao tác.

Tên của hàm được sử dụng cho tag có thể là bất cứ tên nào bạn muốn.

Ngoài ra, tag function không nhất thiết là trả về một chuỗi, nó có thể hoạt động trên các giá trị đó và trả về bất cứ loại giá trị nào. Ví dụ sau đây tag function có thể bỏ qua mọi thứ và trả về null:

Một ví dụ khác về hành động có thể được thực hiện trong Tagged Templates đang áp dụng cho một số thay đổi cho cả hai mặt của biểu thức. Chẳng hạn như bạn muốn bọc từng biểu thức trong các thẻ HTML, cụ thể ở đây là tạo hàm higlight để bọc biểu thức vào trong cặp thẻ <span></span> để thuận tiện cho việc thêm các thuộc tính CSS cho nó.

Kết quả thu được:

image.png

7. Raw Strings

Thuộc tính raw đặc biệt, có sẵn trên đối số đầu tiên của tag function, cho phép bạn truy cập các chuỗi thô (raw strings) khi chúng được nhập mà không cần xử lý các chuỗi thoát escape sequences

Không những thế, còn tồn tại phương thức String.raw() để tạo các raw strings

8. Browser Compatibility

  • Desktop
ChromeEdgeFirefoxInternet ExplorerOperaSafari
411234No support289
  • Mobile
WebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
4141342894.0
  • NodeJS: 4.0.0

9. Kết luận

Qua bài viết này, hy vọng sẽ giúp bạn hiểu và áp dụng được Template Literals phục vụ cho việc thao tác với chuỗi trở nên dễ dàng và thuận tiện hơn. Đây là bài viết đầu tiên của mình, nếu có gì sai sót, mình rất mong nhận được ý kiến đóng góp cũng như nhận xét của mọi người trong phần comments để mình có thể hoàn thiện hơn trong những bài viết sau này.

Cảm ơn mọi người đã đọc bài viết của mình. Happy Coding

10. Tham khảo

Chia sẻ bài viết ngay