Nội suy chuỗi JavaScript là quá trình nhúng một biểu thức vào một phần của chuỗi. Một ký tự mẫu được sử dụng để nhúng các biểu thức. Bạn có thể thêm các giá trị như biến và phép tính toán học vào một chuỗi bằng cách sử dụng phép nội suy.
Bạn có cần thêm giá trị bên trong chuỗi JavaScript không? Bạn đã đề cập đến cú pháp theo nghĩa đen của mẫu. Các ký tự mẫu giúp làm việc với các chuỗi nhiều dòng và nhúng các giá trị vào trong một chuỗi JavaScript dễ dàng hơn. Các ký tự mẫu là cú pháp nội suy chuỗi JavaScript.
Trong hướng dẫn này, chúng ta sẽ nói về nội suy chuỗi JavaScript. Chúng ta sẽ thảo luận về nó là gì, nó hoạt động như thế nào và xem qua một ví dụ về nội suy chuỗi để giúp bạn bắt đầu.
Không cần phải quảng cáo thêm, hãy bắt đầu!
Nội suy chuỗi JavaScript
Bạn có thể thêm các giá trị vào một chuỗi JavaScript bằng cách sử dụng một ký tự mẫu. Đây là một ký hiệu đô la theo sau bởi một cặp dấu ngoặc nhọn. Trong dấu ngoặc nhọn phải là biểu thức có giá trị mà bạn muốn nhúng vào chuỗi.
Các ký tự mẫu cho phép bạn nhúng các giá trị vào một chuỗi mà không cần dựa vào nối. Để khai báo một mẫu theo nghĩa đen, chuỗi của bạn phải được đặt trong dấu tích phía sau (“) thay vì dấu ngoặc kép.
Hãy xem xét cú pháp sau:
`This is a string. Here is the value of 9 + 10: ${9 + 10}.` Chúng tôi đã khai báo một mẫu theo nghĩa đen. Biểu thức của chúng tôi là:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
${9 + 10} Biểu thức này đánh giá 9 + 10. Kết quả của biểu thức này được thêm vào cuối chuỗi của chúng ta, trước khi dừng đầy đủ. Điều này là do chúng tôi đã viết biểu thức của mình trước khi dừng hoàn toàn.
Ví dụ về nội suy chuỗi JavaScript
Các ký tự mẫu cho phép bạn nhúng các giá trị trực tiếp vào một chuỗi. Hãy xem xét mã này:
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 mã đầu tiên xác định số địa chỉ của Thủ tướng. Tiếp theo, chúng tôi sử dụng các ký tự mẫu để tạo địa chỉ đầy đủ. Cú pháp $ {} được sử dụng để nhúng một giá trị vào chuỗi của chúng tôi. Chúng tôi đã thêm giá trị của “address_number” vào chuỗi.
Hãy chạy mã của chúng tôi:
The Prime Minister's address is 10 Downing Street
Mã của chúng tôi đã hợp nhất hai chuỗi của chúng tôi.
Khi bạn đang sử dụng các ký tự mẫu, bạn có thể nhúng bất kỳ giá trị nào vào bên trong ký tự. Điều này bao gồm một chuỗi, một số hoặc kết quả của một phép tính toán JavaScript. Bạn không cần phải nhúng một ký tự mẫu vào bên trong một ký tự mẫu.
Một trong những ưu điểm chính của chuỗi ký tự là cú pháp của nó rõ ràng. Chúng tôi có thể nhúng mã JavaScript trực tiếp vào chuỗi của chúng tôi.
Hợp nhất các chuỗi bằng phép ghép
Chúng ta có thể hợp nhất các chuỗi bằng cách sử dụng phép nối. Giả sử chúng ta có hai chuỗi:
const full_address = `The Prime Minister's address is `; const address_number = `10 Downing Street`;
Bạn có thể nối hai chuỗi bằng cách sử dụng dấu cộng (+):
const prime_minister_address = full_address + address_number + "."; console.log(prime_minister_address);
Bảng điều khiển JavaScript in ra giá trị sau:
The Prime Minister's address is 10 Downing Street
Chúng tôi đã tạo thành công một chuỗi kết hợp hai chuỗi của chúng tôi. Cuối cùng, chúng tôi sử dụng toán tử nối để thêm dấu dừng đầy đủ (“.”) Vào câu của chúng tôi.
Nhưng, cú pháp này có một nhược điểm:chúng ta chỉ có thể thêm giá trị vào cuối một chuỗi. Đây là một lý do lớn đằng sau sự ra đời của cú pháp theo nghĩa đen của khuôn mẫu. Giờ đây, việc thêm các giá trị vào giữa một chuỗi dễ dàng hơn.
JavaScript nội suy chuỗi:Tính toán
Mã bên trong một ký tự mẫu là một câu lệnh JavaScript. Điều này có nghĩa là bạn có thể sử dụng các ký tự mẫu để thực hiện các phép tính và nhúng các giá trị của chúng vào một chương trình.
Hãy tạo một chuỗi tính giá của hai loại đồ uống tại một quán cà phê và đặt kết quả vào trong một chuỗi:
var drink1 = 2.30;
var drink2 = 2.20;
var bill = `The total cost of your drinks is $${drink1 + drink2}.`; Bên trong cú pháp $ {}, chúng tôi đã thêm một phép tính. Phép tính này cộng các giá trị của hai biến JavaScript với nhau. Các biến của chúng tôi là uống 1 (2,30) và uống 2 (2,20) cùng nhau. Mã của chúng tôi trả về một chuỗi với tổng các giá trị sau:
The total cost of your drinks is $4.50.
JavaScript nội suy chuỗi:Toán tử bậc ba
Các toán tử bậc ba trong JavaScript cho phép bạn đánh giá xem một câu lệnh là Đúng hay Sai. Chúng là một cách ngắn gọn hơn để viết câu lệnh if. Toán tử bậc ba đặc biệt hữu ích nếu kết quả của một nếu câu lệnh sẽ chỉ chiếm một dòng mã.
Nếu khách hàng chi hơn 4,00 đô la cho cà phê của họ, họ sẽ được xuất trình hóa đơn. Sau đó, họ sẽ được yêu cầu tham gia câu lạc bộ thẻ khách hàng thân thiết của cà phê. Nếu không, họ chỉ nên xuất trình hóa đơn của họ. Chúng tôi có thể sử dụng nhà điều hành bậc ba để kiểm tra chi phí hóa đơn của khách hàng:
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); Chữ mẫu của chúng tôi chứa hai biểu thức được nhúng. Đầu tiên, chúng tôi nhúng giá trị của "tổng" vào trong chuỗi của chúng tôi. Tiếp theo, chúng tôi sử dụng nhà điều hành bậc ba để kiểm tra xem khách hàng có nên được yêu cầu tham gia câu lạc bộ thẻ khách hàng thân thiết của quán cà phê hay không.
Nếu tổng giá mua trên $ 4,00, thông báo sau sẽ được in ra bảng điều khiển:
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.
Nếu không, toán tử bậc ba của chúng ta sẽ trả về giá trị sau dấu hai chấm (“:”). Đây là giá trị được trả về khi một biểu thức đánh giá là Sai.
Trong ví dụ của chúng tôi, giá trị sau dấu hai chấm là một chuỗi trống. Điều này có nghĩa là nếu giao dịch mua của khách hàng dưới $ 4,00, thì chỉ câu đầu tiên của nghĩa đen mẫu của chúng tôi được trả lại:
The total cost of your drinks is $4.50.
Kết luận
Các ký tự mẫu cho phép bạn nhúng một giá trị vào bên trong một chuỗi. Bạn có thể thực hiện các phép tính bên trong một ký tự mẫu. Chúng tôi khai báo các ký tự mẫu bằng cách sử dụng dấu gạch ngược. Các câu lệnh cần đánh giá được biểu thị bằng một ký hiệu đô la và một cặp dấu ngoặc nhọn mà câu lệnh xuất hiện trong đó.
Để được tư vấn về cách tìm hiểu thêm về JavaScript, hãy đọc hướng dẫn Cách học JavaScript của chúng tôi.