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 các chuỗi hoặc các biểu thức nhúng dưới dạng một chuỗi. Chúng được bọc trong các miếng dán ngược
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
5. 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
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
6hoặc một trích dẫn kép 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
7cho 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 các ký tự thoát
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
8// 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 đoạn trích dẫn mà còn làm cho mã của chúng tôi trông sạch sẽ hơn
Multi line string sử dụng mẫu chữ
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ế
________số 8vớ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
const name = 'Jack';
console.log[`Hello ${name}!`]; // Hello Jack!
0Resuymation expression
Trước JavaScript ES6, bạn sẽ sử dụng
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
9toán tử để kế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!
2Với các ký tự mẫu, việc đưa ra các biến và biểu thức 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
// escape characters using \
const str3 = 'A \'quote\' inside a string'; // valid code
const str5 = "Another \"quote\" inside a string"; // valid code
0cú phápconst name = 'Jack';
console.log[`Hello ${name}!`]; // Hello Jack!
4đầu ra
const name = 'Jack';
console.log[`Hello ${name}!`]; // Hello Jack!
5Quá trình gán các biến và biểu thức bên trong 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ụ,
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
0Tuy 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 hàm định nghĩa. Tuy nhiên, bạn không vượt qua dấu ngoặc đơn
// escape characters using \
const str3 = 'A \'quote\' inside a string'; // valid code
const str5 = "Another \"quote\" inside a string"; // valid code
1khi gọi đen. 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
1đầu ra
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
2Một mảng các chuỗi giá trị được chuyển làm đối số đầu tiên của một thẻ hàm. Bạn cũng có thể chuyển đổi các giá trị và biểu thức làm lại các đối số còn lại. Ví dụ,