JavaScript Template Literals: Cách sử dụng Template Strings để làm việc hiệu quả với chuỗi trong JavaScript

Khám phá JavaScript Template Literals - Công cụ mạnh mẽ để tạo và định dạng chuỗi trong mã nguồn JavaScript

thumnail

JavaScript Template Literals (còn được gọi là Template Strings) là một tính năng quan trọng trong JavaScript, cho phép bạn tạo và định dạng chuỗi một cách dễ dàng và hiệu quả. Trong tiêu đề này, mình sẽ giới thiệu về cách sử dụng JavaScript Template Literals và những lợi ích của nó. Bạn sẽ tìm hiểu cách tạo chuỗi linh hoạt với các biểu thức và biến nhúng trong Template Strings, cũng như cách định dạng chuỗi đa dòng và chuỗi nhiều dòng. Với JavaScript Template Literals, bạn có thể tạo mã nguồn JavaScript dễ đọc hơn, tránh sự rườm rà của việc kết hợp các chuỗi thông qua phép cộng. Khám phá cách sử dụng JavaScript Template Literals để làm việc hiệu quả với chuỗi trong mã nguồn JavaScript ngay hôm nay!

Template literals (template strings) cho phép bạn sử dụng các chuỗi hoặc biểu thức nhúng (embedded expressions) ở dạng chuỗi. Chúng được đặt trong dấu ngoặc ngược ` `. 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 literal. 

Template Literals for Strings

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 bên trong dấu đó, bạn có thể sử dụng ký tự \ (dấu flash ngược).

// escape characters using \
const str3 = 'A \'quote\' inside a string';  // valid code
const str5 = "Another \"quote\" inside a string"; // valid code

Thay vào đó 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`;

Bạn có thể thấy, template literals không chỉ dễ sử dụng để thêm các dấu ngoặc khác bên trong mà còn làm cho code của chúng ta clean hơn.

Multiline Strings Using Template Literals

Template literals cũng giúp dễ dàng viết multiline strings. Ví dụ

Sử dụng template literals, bạn có thể thay thế đoạn code bên dưới như sau:

// using the + operator
const message1 = 'This is a long message\n' + 
'that spans across multiple lines\n' + 
'in the code.'

console.log(message1)

thành

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

console.log(message1)

Ngõ ra cũng sẽ tương tự cho cả hai đoạn code.

Expression Interpolation

Trước khi 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 template literals, việc bao gồm các biến và biểu thức bên trong một chuỗi sẽ dễ dàng hơn một chút. Đối với điều đó, bạn chỉ cần 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'}`)

Ngõ ra:

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

Quá trình gán các biến và biểu thức bên trong template literals được gọi là phép nội suy (interpolation).

Tagged Template

Thông thường, bạn sẽ sử dụng một function để 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 tags cho phép bạn phân tích các template literals bằng một function.

Tagged template được viết giống như một hàm. Tuy nhiên, you do not pass parentheses () when calling the literal. Ví dụ

function tagExample(strings) {
    return strings;
}

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

console.log(result);

Output

["Hello Jack"]

Một mảng các giá trị của chuỗi được truyền vào dưới dạng đối số đầu tiên của tag function. Bạn cũng có thể chuyển các giá trị và biểu thứ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);

Output

Hello Jack, How are you?

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

No comments:

Powered by Blogger.