Trong hướng dẫn này, bạn sẽ tìm hiểu về các Bản mẫu JavaScript (Chuỗi mẫu) với sự trợ giúp của các ví dụ.
Các ký tự mẫu (chuỗi mẫu) cho phép bạn sử dụng chuỗi hoặc các biểu thức nhúng dưới dạng một chuỗi. Chúng được bao bọc trong các que tính ngược ``. Ví dụ,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Lưu ý : Chữ mẫu đã được giới thiệu vào năm 2015 (còn được gọi là ECMAScript 6 hoặc ES6 hoặc ECMAScript 2015). Một số trình duyệt có thể không hỗ trợ việc sử dụng các ký tự mẫu. Truy cập hỗ trợ JavaScript Template Literal để tìm hiểu thêm.
Chữ mẫu cho chuỗi
Trong các phiên bản JavaScript trước đó, bạn sẽ sử dụng một trích dẫn đơn ''hoặc một trích dẫn kép ""cho các chuỗi. Ví dụ,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Để sử dụng các trích dẫn tương tự bên trong chuỗi, bạn có thể sử dụng ký tự thoát .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Thay vì sử dụng các ký tự thoát, bạn có thể sử dụng các ký tự mẫu. Ví dụ,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Như bạn có thể thấy, các ký tự mẫu không chỉ giúp dễ dàng đưa vào các trích dẫn mà còn làm cho mã của chúng ta trông sạch sẽ hơn.
Chuỗi đa dòng sử dụng chữ mẫu
Các ký tự mẫu cũng giúp bạn dễ dàng viết các chuỗi nhiều dòng. Ví dụ,
Sử dụng các ký tự mẫu, bạn có thể thay thế
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
với
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Đầu ra của cả hai chương trình này sẽ giống nhau.
Đây là một tin nhắn dài trải dài qua nhiều dòng trong mã.
Nội suy biểu thức
Trước JavaScript ES6, bạn sẽ sử dụng +toán tử để nối các biến và biểu thức trong một chuỗi. Ví dụ,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Với các ký tự mẫu, việc đưa các biến và biểu thức vào trong một chuỗi sẽ dễ dàng hơn một chút. Đối với điều đó, chúng tôi sử dụng $(… )cú pháp.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Đầu ra
Xin chào Jack Tổng của 4 + 5 là 9 Rất cao
Quá trình gán các biến và biểu thức bên trong khuôn mẫu được gọi là nội suy.
Mẫu được gắn thẻ
Thông thường, bạn sẽ sử dụng một hàm để chuyển các đối số. Ví dụ,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Tuy nhiên, bạn có thể tạo các mẫu được gắn thẻ (hoạt động giống như một hàm) bằng cách sử dụng các ký tự mẫu. Bạn sử dụng các thẻ cho phép bạn phân tích cú pháp các ký tự mẫu với một hàm.
Mẫu được gắn thẻ được viết giống như một định nghĩa hàm. Tuy nhiên, bạn không vượt qua dấu ngoặc đơn ()khi gọi nghĩa đen. Ví dụ,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Đầu ra
("Xin chào Jack")
Một mảng các giá trị chuỗi được chuyển làm đối số đầu tiên của một hàm thẻ. Bạn cũng có thể chuyển các giá trị và biểu thức làm các đối số còn lại. Ví dụ,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Đầu ra
Xin chào Jack, Bạn khỏe không?
Bằng cách này, bạn cũng có thể chuyển nhiều đối số trong temaplate được gắn thẻ.
