Template Literals trong JavaScript

Template Literals trong JavaScript

Anh NguyễnBạn nghĩ gì về bài viết này?

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về Template Literals (Template Strings) trong JavaScript.

Định nghĩa

Template Literals hay còn gọi là Template Strings là một cú pháp mới để khai báo String trong JavaScript được giới thiệu trong ES2015/ES6. Nó cho phép chúng ta sử dụng multi-line string, biến, biểu thức, hàm bên trong String mà không phải thông qua phép cộng String.

let name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!Code language: JavaScript (javascript)

Lưu ý: Template Literals đượ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 Template Literals. Truy cập JavaScript Template Literal support để tìm hiểu thêm.

Template Literals với String

Trong các phiên bản trước của JavaScript, bạn sẽ sử dụng một dấu nháy đơn '' hoặc dấu nháy kép " " với 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"; // ErrorCode language: JavaScript (javascript)

Để 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ự \ .

// escape characters using \
const str3 = 'A \'quote\' inside a string';  // valid code
const str5 = "Another \"quote\" inside a string"; // valid codeCode language: JavaScript (javascript)

Thay vì sử dụng ký tự \, bạn có thể sử dụng Template Literals. Ví dụ:

let str1 = `This is a string`;
let str2 = `This is a string with a 'quote' in it`;
let str3 = `This is a string with a "double quote" in it`;Code language: JavaScript (javascript)

Như bạn có thể thấy, Template Literals 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.

Template Literals với Multiline Strings

Template Literals cũng giúp bạn dễ dàng viết các chuỗi nhiều 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)Code language: JavaScript (javascript)

bằng

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

console.log(message1)Code language: JavaScript (javascript)

Kết quả

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

Biểu thức nội suy

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ụ:

let name = 'Jack';
console.log('Hello ' + name); // Hello JackCode language: JavaScript (javascript)

Với Template Literals, việc gán các biến và biểu thức bên trong một chuỗi sẽ dễ dàng hơn. Để làm được điều đó, chúng ta sử dụng cú pháp $ {…}.

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

// template literals used with expressions

let result = `The sum of  4 + 5 is ${4 + 5}`;
console.log(result); 

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

Kết quả

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.

Tagged Templates

Thông thường, bạn sẽ sử dụng một hàm để truyền các đối số. Ví dụ:

function tagExample(strings) {
    return strings;
}

// passing argument
let result = tagExample('Hello Jack');

console.log(result);Code language: JavaScript (javascript)

Chúng ta có thể truyền một Template Literals vào 1 hàm tag bằng cách viết tên hàm này trước dấu back-tick bắt đầu 1 Template Literal. Hàm tag này được dùng để xử lý chuỗi trước khi chúng được in ra hay gán vào 1 biến khác.

Tagged Templates được viết giống như một định nghĩa hàm. Tuy nhiên, bạn không thể truyền qua dấu ngoặc () như bình thường được. Ví dụ:

function tagExample(strings) {
    return strings;
}

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

console.log(result);Code language: JavaScript (javascript)

Kết quả

["Hello Jack"]

Một mảng các giá trị chuỗi được truyền vào làm đối số đầu tiên của Tagged Templates. 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ụ,

let name = 'Jack';
let 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
let result = tagExample`Hello ${name}, How are you?`;

console.log(result);Code language: JavaScript (javascript)

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 Templates.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận