Javascript mẫu chuỗi

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ố 8

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

const name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!
0

Resuymation 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!
2

Vớ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áp

const name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!
4

đầu ra

const name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!
5

Quá 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
0

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 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
2

Mộ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ụ,