JavaScript string interpolation (nội suy chuỗi) là quá trình nhúng biểu thức vào phần của chuỗi. Template literal (chuỗi mẫu) dùng để nhúng biểu thức. Bạn có thể thêm giá trị như biến và phép tính toán vào chuỗi dùng interpolation.
Cần thêm giá trị vào chuỗi JavaScript? Cú pháp template literal lo việc đó. Template literals làm dễ dàng làm việc với multi-line strings (chuỗi nhiều dòng) và nhúng giá trị vào chuỗi JS. Template literals chính là cú pháp string interpolation của JavaScript.
Trong hướng dẫn này, nói về JS string interpolation. Thảo luận nó là gì, cách hoạt động, và ví dụ để bắt đầu.
JavaScript String Interpolation
Bạn có thể thêm giá trị vào chuỗi JS dùng template literal. Đây là dấu dollar ($) theo sau cặp ngoặc nhọn {}. Bên trong ngoặc nhọn là biểu thức giá trị muốn nhúng vào chuỗi.
Template literals cho phép nhúng giá trị vào chuỗi mà không cần concatenation (nối chuỗi). Để khai báo template literal, chuỗi phải trong backticks (`) thay vì dấu nháy.
Xét cú pháp:
`This is a string. Here is the value of 9 + 10: ${9 + 10}.`
Đã khai báo template literal. Biểu thức:
${9 + 10}
Biểu thức tính 9 + 10. Kết quả thêm vào cuối chuỗi, trước dấu chấm. Vì viết biểu thức trước dấu chấm.
Ví dụ String Interpolation
Template literals cho phép nhúng giá trị trực tiếp vào chuỗi. Xét code:
const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address)
Dòng 1 định nghĩa số địa chỉ Thủ tướng. Dùng template literals tạo địa chỉ đầy đủ. Cú pháp ${} nhúng giá trị vào chuỗi. Thêm giá trị "address_number" vào chuỗi.
Chạy code:
The Prime Minister's address is 10 Downing Street
Mã gộp 2 chuỗi.
Khi dùng template literals, nhúng bất kỳ giá trị nào: string, number, hoặc kết quả phép tính JS. Không cần nhúng template literal trong template literal.
Ưu điểm lớn của string literals: cú pháp rõ ràng. Nhúng code JS trực tiếp vào chuỗi.
Gộp chuỗi dùng Concatenation (Nối chuỗi)
Có thể gộp chuỗi dùng concatenation. Giả sử 2 chuỗi:
const full_address = `The Prime Minister's address is `; const address_number = `10 Downing Street`;
Nối 2 chuỗi dùng dấu cộng (+):
const prime_minister_address = full_address + address_number + "."; console.log(prime_minister_address);
Console in:
The Prime Minister's address is 10 Downing Street
Tạo thành công chuỗi gộp 2 chuỗi. Cuối dùng + thêm dấu chấm (".") vào câu.
Nhưng cú pháp này nhược điểm: chỉ thêm giá trị vào cuối chuỗi. Lý do lớn ra đời template literal syntax. Giờ dễ dàng thêm giá trị giữa chuỗi.
String Interpolation JavaScript: Calculations (Phép tính)
Code trong template literal là JS statement. Nghĩa là dùng template literals thực hiện phép tính nhúng giá trị vào chương trình.
Tạo chuỗi tính giá 2 ly đồ uống quán cà phê đặt kết quả vào chuỗi:
var drink1 = 2.30;
var drink2 = 2.20;
var bill = `The total cost of your drinks is $${drink1 + drink2}.`;
Bên trong ${}, thêm phép tính. Phép tính cộng 2 biến JS. Biến drink1 (2.30) và drink2 (2.20). Code trả về chuỗi có tổng:
The total cost of your drinks is $4.50.
String Interpolation JavaScript: Ternary Operators (Toán tử 3 ngôi)
JS ternary operators cho phép đánh giá câu lệnh True/False. Cách viết gọn if statement. Ternary operators hữu ích nếu kết quả if chỉ 1 dòng.
Nếu khách chi tiêu > $4.00 cho cà phê, hiện bill và mời tham gia club loyalty. Ngược lại, chỉ hiện bill. Dùng ternary operator kiểm tra bill:
var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;
var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);
Template literal chứa 2 biểu thức nhúng. Thứ nhất, nhúng "total". Thứ hai, ternary operator kiểm tra khách có nên mời tham gia club loyalty.
Nếu tổng > $4.00, in ra console:
The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.
Ngược lại, ternary operator trả về giá trị sau dấu hai chấm (":"). Giá trị trả về khi biểu thức False.
Ví dụ, giá trị sau dấu hai chấm là chuỗi rỗng. Nghĩa là nếu mua < $4.00, chỉ câu đầu template literal trả về:
The total cost of your drinks is $4.50.
Kết luận
Template literals cho phép nhúng giá trị vào chuỗi. Có thể thực hiện phép tính trong template literal. Khai báo template literals dùng backticks. Câu lệnh đánh giá dùng dấu dollar và cặp ngoặc nhọn bên trong chứa câu lệnh.
Lời khuyên học thêm JavaScript, đọc How to Learn JavaScript guide.