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
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.
Tags
Javascript