Việc bổ sung các ký tự mẫu trong ECMAScript 6 (ES6) cho phép chúng tôi nội suy các chuỗi trong JavaScript.
Nói một cách đơn giản hơn, chúng ta có thể sử dụng các trình giữ chỗ để đưa các biến vào một chuỗi. Bạn có thể xem một ví dụ về phép nội suy chuỗi bằng cách sử dụng các ký tự mẫu trong đoạn mã bên dưới:
const age = 4.5;
const earthAge = `Earth is estimated to be ${age} billion years old.`;
console.log(earthAge);
Trước hết, bạn sẽ thấy rằng chúng tôi đang sử dụng backticks cho các mẫu chữ. Bên cạnh đó, chúng tôi cũng có định dạng của ${placeholder}, cho phép chúng ta chèn một giá trị động vào chuỗi. Bất cứ điều gì bên trong ${} được đánh giá là JavaScript.
Ví dụ, chúng ta có thể viết Earth is estimated to be ${age + 10} billion years old.và nó sẽ hoạt động như thể chúng ta đã làm const age = 4.5 + 10;.
Làm thế nào chúng ta làm điều đó trước đây?
Trước các mẫu chữ, chúng tôi sẽ làm như thế này:
const earthAge = "Earth is estimated to be " + age + " billion years old.";
Như bạn có thể thấy, chúng tôi đã có rất nhiều trích dẫn cho một chuỗi đơn giản. Hãy tưởng tượng chúng ta phải chèn một số biến. Nó có thể nhanh chóng biến thành một chuỗi phức tạp không thể đọc được. Do đó, mẫu chữ làm cho chuỗi sạch hơn và dễ đọc hơn.
Tuy nhiên, đây chỉ là một trường hợp. Hãy xem thêm các trường hợp sử dụng cho chữ mẫu.
Chuỗi nhiều dòng
Một cách sử dụng thuận tiện khác của chuỗi mẫu là chuỗi nhiều dòng. Trước mẫu chữ, chúng tôi đã sử dụng \n cho các dòng mới, như trong console.log('line 1\n' + 'line 2').
Đối với hai dòng, điều này có thể ổn. Nhưng hãy tưởng tượng chúng ta muốn có năm dòng. Một lần nữa, chuỗi trở nên phức tạp không cần thiết.
const earthAge = `Earth is estimated to be ${age} billion years old.
Scientists have scoured the Earth searching for the oldest rocks to radiometrically date.
In northwestern Canada, they discovered rocks about 4.03 billion years old.
`;
Đoạn mã trên chứng minh một lần nữa việc viết các chuỗi nhiều dòng với các mẫu chữ trở nên đơn giản và rõ ràng như thế nào.
Như một bài tập, hãy thử chuyển đổi chuỗi trên để sử dụng phép nối và dòng mới \n.
Biểu thức
Với mẫu chữ, chúng ta cũng có thể sử dụng các biểu thức trong chuỗi. Điều đó nghĩa là gì?
Chẳng hạn, chúng ta có thể sử dụng các biểu thức toán học như nhân hai số. Đoạn trích dưới đây chỉ minh họa điều đó:
const firstNumber = 10;
const secondNumber = 39;
const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`;
console.log(result);
Nếu không có mẫu chữ, chúng ta sẽ phải làm một cái gì đó như thế này:
const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + ".";
Viết một chuỗi như trên có thể nhanh chóng trở nên phức tạp và khó hiểu. Như chúng ta vẫn thấy, các mẫu chữ giúp việc nhúng các biểu thức vào chuỗi trở nên dễ dàng và thanh lịch hơn.
nhà điều hành ternary
Với phép nội suy chuỗi, thậm chí chúng ta có thể sử dụng toán tử bậc ba bên trong một chuỗi. Điều này cho phép chúng tôi kiểm tra giá trị của một biến và hiển thị những thứ khác nhau tùy thuộc vào giá trị đó.
Hãy xem ví dụ dưới đây:
const drinks = 4.99;
const food = 6.65;
const total = drinks + food;
const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.`
console.log(result);
Trong ví dụ trên, chẳng hạn, chúng tôi kiểm tra xem tổng số tiền có nhiều hơn mười đô la hay không.
Nếu số tiền nhiều hơn mười, chúng tôi sẽ thông báo cho người dùng rằng thanh toán bằng thẻ sẽ bị từ chối. Nếu không, thanh toán bằng thẻ được chấp nhận. Như bạn có thể thấy, phép nội suy chuỗi cho phép chúng ta làm những điều thú vị với chuỗi.
Việc bổ sung các mẫu chữ trong ES6 cho phép chúng tôi viết các chuỗi tốt hơn, ngắn hơn và rõ ràng hơn. Nó cũng cung cấp cho chúng ta khả năng đưa các biến và biểu thức vào bất kỳ chuỗi nào. Về cơ bản, bất cứ điều gì bạn viết bên trong dấu ngoặc nhọn (${}) được coi là JavaScript.
Vì vậy, chúng ta có thể sử dụng chữ mẫu để:
- viết chuỗi nhiều dòng
- nhúng biểu thức
- viết chuỗi với toán tử ternary
Cảm ơn vì đã đọc! Nếu bạn muốn giữ liên lạc, hãy kết nối trên Twitter @catalinmpit. Tôi cũng thường xuyên xuất bản các bài viết trên blog của mình catalins.tech nếu bạn muốn đọc thêm nội dung từ tôi.
