JavaScript Template Literals (Chuỗi mẫu)

Một phần tử mới được thêm vào trong ES6 là chữ mẫu. Đây là một kiểu mới để tạo chuỗi trong JavaScript bổ sung một số tính năng mới quan trọng, chẳng hạn như khả năng tạo chuỗi nhiều dòng và bao gồm một biểu thức trong một chuỗi. Với tư cách là nhà phát triển, tất cả các tính năng này có thể nâng cao khả năng thao tác chuỗi của bạn và cho phép bạn tạo chuỗi động.

Bài đăng này sẽ minh họa các ký tự mẫu và cách sử dụng chúng trong JavaScript.

JavaScript Template Literals (Chuỗi mẫu) là gì?

“ Chữ mẫu ”Thường được gọi là“ Chuỗi mẫu ”. Chúng được bao quanh bởi backtick ( “ ) ký tự, so với dấu ngoặc kép trong chuỗi. Phần giữ chỗ của nó được biểu thị bằng ký hiệu đô la “ $ ”, Và dấu ngoặc nhọn {} giống ' $ {biểu thức} ”Có thể chấp nhận được trong các ký tự mẫu. Nếu bạn muốn sử dụng một biểu thức, bạn có thể đặt nó vào “ $ {biểu thức} ”Hộp bên trong que tính.

Chữ mẫu là một phiên bản cải tiến của một chuỗi JavaScript tiêu chuẩn. Sự thay thế tạo ra sự khác biệt đáng kể giữa chữ mẫu và một chuỗi thông thường. Bạn có thể tích hợp các biến và biểu thức vào một chuỗi bằng cách sử dụng thay thế. Các biến và biểu thức này sẽ được công cụ JavaScript tự động thay thế các giá trị của chúng.

Cú pháp

Sử dụng cú pháp dưới đây để khai báo một chuỗi đơn bằng cách sử dụng các ký tự mẫu:

Đối với nhiều dòng, hãy làm theo cú pháp đã cho:

Nếu bạn muốn thêm biểu thức bên trong dấu gạch ngược, cú pháp sau được sử dụng:

Hãy xem các ví dụ sau để hiểu rõ hơn về khái niệm đã nêu.

Ví dụ 1: Khai báo một chuỗi đơn bằng cách sử dụng chữ viết của mẫu JavaScript

Thông thường, để tạo một chuỗi, bắt buộc phải sử dụng dấu nháy đơn hoặc dấu ngoặc kép, nhưng trong các ký tự mẫu, bạn có thể tạo một chuỗi như sau:

Kết quả đầu ra cho thấy rằng nó hoạt động giống như cách tạo sting đơn giản với sự trợ giúp của dấu ngoặc kép đơn hoặc kép:

Ví dụ 2: Khai báo chuỗi nhiều dòng bằng các chữ viết tắt của mẫu JavaScript

Thông thường, để in nhiều dòng, chúng tôi sử dụng toán tử nối (+) và để thêm một dòng mới, (\ n) có thể được sử dụng, điều này thường có thể làm cho mã phức tạp:

Trong khi sử dụng các ký tự mẫu, bạn có thể bắt đầu một dòng mới bằng cách nhấn enter từ bàn phím trong khối dấu gạch ngược:

Đầu ra

Ví dụ 3: Chuỗi có thay thế biểu thức

Ở đây, trước tiên chúng ta sẽ tạo hai biến “ x ' và ' Y ”, Với các giá trị“ hai mươi ' và ' mười lăm ', tương ứng:

Sau đó, tạo một biến “ Tổng ”Để thêm“ x ' và ' Y ”:

Nếu bạn muốn thêm hai số và hiển thị tổng các số này trên bảng điều khiển, thông thường, bắt buộc phải nối các chuỗi và biến ở định dạng chuỗi thông thường, điều này thường tạo ra sự lộn xộn khi sử dụng dấu nháy đơn hoặc dấu ngoặc kép lặp đi lặp lại với các chuỗi và nối chúng. với nhau và với các biến sử dụng ( + ):

Trong khi, bằng cách sử dụng các ký tự mẫu, bạn chỉ phải chỉ định các chuỗi với các biến dưới dạng một biểu thức bên trong “ $ {} ”Trong khối backtick:

Đầu ra

Chúng tôi đã thu thập tất cả các thông tin cần thiết liên quan đến các chữ mẫu.

Sự kết luận

“ Chữ mẫu ', còn được biết là ' Chuỗi mẫu ”, Là phiên bản cải tiến của chuỗi JavaScript tiêu chuẩn được bao quanh bởi biểu tượng nền ( “ ) ký tự, so với dấu ngoặc kép trong chuỗi. Nó cho phép tạo các chuỗi một dòng và nhiều dòng mà không cần sử dụng toán tử nối và bao gồm một biểu thức trong một chuỗi. Bài đăng này đã thảo luận về các ký tự mẫu trong JavaScript với các ví dụ được giải thích.