Câu lệnh switch case trong JavaScript là một câu lệnh if else đa nhánh. Nó nhận một biểu thức điều kiện giống như câu lệnh if nhưng có thể có nhiều điều kiện – hoặc cases – khớp với kết quả của biểu thức để chạy các khối mã khác nhau.
Tổng quan về câu lệnh điều kiện trong JavaScript
Câu lệnh điều kiện là một phần thiết yếu của lập trình và được dùng để kiểm soát luồng của một chương trình máy tính. Dạng phổ biến nhất của câu lệnh điều kiện trong JavaScript là khối mã "if" và "if...else", có thể được dùng để chạy mã chỉ khi một điều kiện nhất định hoặc tập hợp điều kiện được đáp ứng.
Có một câu lệnh điều kiện tích hợp sẵn khác trong JavaScript có thể được dùng để đánh giá một biểu thức dựa trên nhiều điều kiện: câu lệnh switch case. Các câu lệnh switch case có thể được dùng để kiểm tra xem một điều kiện nhất định có được đáp ứng dựa trên nhiều cases và sẽ chạy các khối mã nơi điều kiện đó được đáp ứng.
Trong hướng dẫn này, chúng ta sẽ thảo luận cách sử dụng câu lệnh switch case trong JavaScript để tạo các câu lệnh điều kiện. Chúng ta cũng sẽ khám phá cách sử dụng nhiều cases với câu lệnh switch để tạo các biểu thức phức tạp hơn.
Ôn tập câu lệnh điều kiện JavaScript
Các câu lệnh điều kiện cho phép bạn chạy mã nếu một điều kiện nhất định được đáp ứng và không thực thi khối mã nếu điều kiện đó không được đáp ứng. Các câu lệnh điều kiện đánh giá xem một điều kiện có được đáp ứng dựa trên kết quả của một câu lệnh true (đúng) và false (sai).
Các câu lệnh điều kiện có thể hữu ích nếu bạn muốn xác minh rằng người dùng đã điền đầy đủ tất cả các form trên trang đặt hàng, hoặc để hiển thị thông báo cho người dùng về ưu đãi sản phẩm chỉ khi họ đã đăng nhập.
Trong JavaScript, dạng phổ biến nhất của câu lệnh điều kiện là câu lệnh "if". Câu lệnh "if" đánh giá xem một câu lệnh là đúng hay sai, và chỉ chạy nếu câu lệnh đánh giá là true. Đây là ví dụ về câu lệnh if trong JavaScript:
var age = 17;
if (age >= 16) {
console.log("Bạn từ 16 tuổi trở lên!");
}
Khi chúng ta chạy mã, đầu ra sau được trả về: "Bạn từ 16 tuổi trở lên!"
Câu lệnh "if" cũng đi kèm với câu lệnh "else if" có thể được dùng để kiểm tra nhiều điều kiện. Nếu bạn quan tâm đến việc tìm hiểu thêm về câu lệnh if và else trong JavaScript, bạn có thể làm theo hướng dẫn của chúng ta về câu lệnh "if...else".
Bây giờ chúng ta đã biết cơ bản về câu lệnh điều kiện trong JavaScript, chúng ta có thể khám phá câu lệnh "switch case".
JavaScript Switch Case
Câu lệnh "switch" trong JavaScript đánh giá một câu lệnh và thực thi một khối mã nếu câu lệnh đó đánh giá là true. Các câu lệnh "switch" hoạt động theo cách tương tự như câu lệnh "if" trong việc kiểm tra xem một câu lệnh có đúng hay không, và chạy nếu câu lệnh bằng true.
Các câu lệnh "switch" được viết bằng cú pháp sau:
switch (statement) {
case a:
// Chạy mã
break;
case b:
// Chạy mã
break;
default:
// Chạy mã
break;
};
Có nhiều thứ đang diễn ra ở đây, hãy phân tích nó. Đây là quy trình chương trình của chúng ta sẽ làm theo khi đọc câu lệnh "switch" của chúng ta:
- Biểu thức switch được đánh giá khi câu lệnh chạy.
- Giá trị của câu lệnh được so sánh với từng case.
- Nếu một case khớp với câu lệnh của chúng ta, khối mã liên quan được chạy.
- Nếu không có case nào được đáp ứng, mã trong khối case
"default"sẽ thực thi.
Ví dụ minh họa: Menu quán cà phê
Hãy ví dụ bạn là chủ quán cà phê muốn tạo chương trình để người dùng dễ dàng kiểm tra giá các loại đồ uống phổ biến. Trong ví dụ của chúng ta, chúng ta sẽ đánh giá đồ uống người dùng chọn dựa trên danh sách cà phê, sau đó in ra giá của đồ uống họ đã chọn.
Dưới đây là mã chúng ta sẽ dùng:
const drink_name = "Americano";
switch (drink_name) {
case "Americano":
console.log("Giá của một Americano là $2.60");
break;
case "Cappuccino":
console.log("Giá của một cappuccino là $2.75");
break;
case "Macchiato":
console.log("Giá của một macchiato là $3.00");
break;
case "Espresso":
console.log("Giá của một espresso là $2.40");
break;
default:
console.log("Đồ uống này không có sẵn");
}
Khi chúng ta chạy chương trình với biến "drink_name" bằng "Americano", kết quả sau được trả về:
Giá của một Americano là $2.60.
Nếu chúng ta đặt "drink_name" bằng một đồ uống khác, giá tương ứng cho đồ uống đó sẽ xuất hiện. Ngoài ra, nếu chúng ta nhập một tên đồ uống không hợp lệ, mã của chúng ta sẽ trả về nội dung của câu lệnh "default", trong trường hợp này là thông báo "Đồ uống này không có sẵn."
Lưu ý rằng chúng ta thêm từ khóa "break" ở cuối mỗi câu lệnh case. Nếu chúng ta không bao gồm câu lệnh break, chương trình của chúng ta sẽ tiếp tục đánh giá các câu lệnh ngay cả sau khi một câu lệnh đã được đáp ứng. Điều này là không hiệu quả, và chúng ta sử dụng từ khóa "break" để đảm bảo rằng khi biểu thức của chúng ta được đáp ứng, chương trình dừng tìm kiếm qua các cases.
JavaScript Switch Multiple Cases (Nhiều cases cho một kết quả)
Trong ví dụ trên, chúng ta sử dụng một case đơn cho mỗi biểu thức, và mỗi biểu thức có một đầu ra khác nhau. Nhưng nếu chúng ta muốn nhiều cases cho ra cùng một đầu ra thì sao?
Giả sử barista của chúng ta đã thêm hai đồ uống mới vào menu, và những đồ uống đó có giá giống như macchiato. Thay vì viết nhiều cases mới với các khối mã riêng, chúng ta có thể sử dụng nhiều "case" cho mỗi khối mã.
Chúng ta sẽ sử dụng ví dụ trên để minh họa cách sử dụng nhiều cases. Tuy nhiên, trong ví dụ này, chúng ta sẽ thay đổi "Giá của [tên đồ uống] là [giá]." thành "Giá của đồ uống này là [giá]." để chúng ta có thể tái sử dụng các câu lệnh console.log().
Chúng ta cũng sẽ thêm hai đồ uống mới: latte và mocha, mỗi thứ giá $3.00 (giống như macchiato).
Dưới đây là mã sửa đổi bao gồm các đồ uống mới:
const drink_name = "Mocha";
switch (drink_name) {
case "Americano":
console.log("Giá của đồ uống này là $2.60");
break;
case "Cappuccino":
console.log("Giá của đồ uống này là $2.75");
break;
case "Latte":
case "Mocha":
case "Macchiato":
console.log("Giá của đồ uống này là $3.00");
break;
case "Espresso":
console.log("Giá của đồ uống này là $2.40");
break;
default:
console.log("Đồ uống này không có sẵn");
}
Khi chúng ta chạy mã trên với biến "drink_name" bằng "Mocha", phản hồi sau được trả về:
Giá của đồ uống này là $3.00.
Như bạn thấy, chương trình của chúng ta đã tìm thấy "Mocha" được liệt kê như một case, và nó đã chạy mã trong khối liên quan.
Kết luận
Câu lệnh điều kiện "switch" có thể được dùng để đánh giá một biểu thức và trả về một giá trị tùy thuộc vào việc biểu thức đó có được đáp ứng hay không. Các câu lệnh switch hữu ích nếu bạn muốn đánh giá một câu lệnh dựa trên nhiều kết quả có thể.
Trong hướng dẫn này, chúng ta đã thảo luận cơ bản về câu lệnh điều kiện trong JavaScript. Sau đó, chúng ta đã khám phá cách sử dụng câu lệnh "switch" và "case" và đi qua ví dụ về cách sử dụng nhiều câu lệnh "case" trong một khối "switch".
Bây giờ bạn đã có thông tin cần thiết để sử dụng câu lệnh "switch case" trong JavaScript như một chuyên gia!