JavaScript Template Literals

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 bao bọc trong các miếng dán 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 tôi 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\n' + 
'that spans across multiple lines\n' + 
'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.

This is a long message
that spans across multiple lines
in the code.

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

Hello Jack
The sum of  4 + 5 is 9
Very high

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

["Hello 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

Hello Jack, How are you?

Bằng cách này, bạn cũng có thể chuyển nhiều đối số trong temaplate được gắn thẻ.