Template Literals JavaScript: Cách tốt hơn để viết chuỗi

Template literals (template strings) cho phép bạn sử dụng chuỗi hoặc biểu thức nhúng dưới dạng chuỗi. Chúng được bao quanh bởi dấu backticks (“). Ví dụ,

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

Lưu ý : Template literal đượ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 template literals.

Template Literals cho Chuỗi

Trong các phiên bản trước của JavaScript, bạn sẽ sử dụng dấu nháy đơn '' hoặc dấu nháy kép "" cho 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ùng một dấu ngoặc 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 ký tự thoát, bạn có thể sử dụng template literals. 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, template literals không chỉ giúp bạn dễ dàng bao gồm dấu ngoặc mà còn làm cho mã của chúng ta trở nên sạch sẽ hơn.

Chuỗi Đa Dòng Sử Dụng Template Literals

Template literals cũng giúp bạn dễ dàng viết chuỗi đa dòng. Ví dụ,

Sử dụng template literals, 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)

Run Code

bằng

const message1 = `This is a long message
that spans across multiple lines
in the code.`

console.log(message1)

Run Code

Kết quả của cả hai chương trình này sẽ giống nhau.

Đây là một thông điệp 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 biến và biểu thức vào một chuỗi. Ví dụ,

const name = 'Jack';
console.log('Hello ' + name); // Hello Jack

Với template literals, việc bao gồm biến và biểu thức vào một chuỗi trở nên dễ dàng hơn một chút. Để làm điều đó, chúng ta sử dụng cú pháp ${...}.

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

const result = 4 + 5;

// template literals used with expressions
console.log(`The sum of 4 + 5 is ${result}`);

console.log(`${result < 10 ? 'Too low': 'Very high'}`)

Run Code

Kết Quả

Hello Jack
The sum of  4 + 5 is 9
Too low

Quá trình gán biến và biểu thức vào template literal được gọi là nội suy.

Tagged Templates

Thông thường, bạn sẽ sử dụng một hàm để truyền đố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 tagged templates (hoạt động giống như một hàm) bằng cách sử dụng template literals. Bạn sử dụng các thẻ cho phép bạn phân tích template literals bằng một hàm.

Tagged template được viết giống như định nghĩa một hàm. Tuy nhiên, bạn không cần truyền dấu ngoặc đơn () khi gọi literal. Ví dụ,

function tagExample(strings) {
    return strings;
}

// creating tagged template
const result = tagExample`Hello Jack`;

console.log(result);

Kết Quả

["Hello Jack"]

Một mảng các giá trị chuỗi được truyền như đối số đầu tiên của một hàm thẻ. Bạn cũng có thể truyề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);

Run Code

Kết Quả

Hello Jack, How are you?

Bằng cách này, bạn cũng có thể truyền nhiều đối số trong tagged template.

• Bài đăng blog này ban đầu được xuất bản tại:https://www.programiz.com/