Cách viết các câu lệnh có điều kiện trong JavaScript
Trong lập trình, sẽ có nhiều trường hợp bạn muốn các khối mã khác nhau chạy tùy thuộc vào đầu vào của user hoặc các yếu tố khác.Ví dụ: bạn có thể cần gửi biểu mẫu nếu mỗi trường được điền đúng cách, nhưng bạn có thể cần ngăn biểu mẫu đó gửi nếu thiếu một số trường bắt buộc. Để đạt được các nhiệm vụ như thế này, ta có các câu lệnh điều kiện , là một phần không thể thiếu của tất cả các ngôn ngữ lập trình.
Câu lệnh điều kiện thực hiện một hành động cụ thể dựa trên kết quả của một kết quả là true
hoặc false
.
Một vài ví dụ về câu lệnh điều kiện JavaScript mà bạn có thể thấy bao gồm:
- Kiểm tra vị trí của user và hiển thị ngôn ngữ chính xác dựa trên quốc gia
- Gửi biểu mẫu khi gửi hoặc hiển thị cảnh báo bên cạnh các trường bắt buộc bị thiếu
- Mở menu thả xuống về một sự kiện nhấp chuột hoặc đóng menu thả xuống nếu nó đã được mở
- Hiển thị trang web của nhà cung cấp rượu nếu user trên tuổi uống rượu hợp lệ
- Hiển thị mẫu đặt phòng cho một khách sạn nhưng không hiển thị nếu khách sạn đã được đặt
Câu lệnh điều kiện là một phần của logic, ra quyết định hoặc điều khiển stream của một chương trình máy tính. Bạn có thể so sánh một câu lệnh điều kiện với một cuốn sách “ Hãy chọn cuộc phiêu lưu của bạn ” hoặc một sơ đồ.
Trong hướng dẫn này, ta sẽ xem xét các câu lệnh điều kiện, bao gồm các từ khóa if
, else
và else if
. Ta cũng sẽ đề cập đến toán tử bậc ba.
Nếu tuyên bố
Các cơ bản nhất của các báo cáo có điều kiện là if
tuyên bố. Một if
tuyên bố sẽ đánh giá liệu một tuyên bố là đúng hay sai, và chỉ chạy nếu trở về tuyên bố true
. Khối mã sẽ bị bỏ qua trong trường hợp kết quả false
và chương trình sẽ chuyển sang phần tiếp theo.
Một if
tuyên bố được viết với if
từ khóa, tiếp theo là một điều kiện trong ngoặc đơn, với mã được thực hiện trong các ngoặc nhọn. Tóm lại, nó có thể được viết như if () {}
.
Đây là phần kiểm tra dài hơn về câu lệnh if
cơ bản.
if (condition) { // code that will execute if condition is true }
Nội dung của một if
tuyên bố đang thụt vào, và các dấu ngoặc nhọn có chứa các khối mã để chạy không kết thúc bằng một dấu chấm phẩy, giống như một khối chức năng.
Ví dụ, hãy xem xét một ứng dụng mua sắm. Giả sử, đối với chức năng của ứng dụng này, user đã gửi một số tiền nhất định vào account của họ sau đó sẽ muốn mua một mặt hàng từ cửa hàng.
// Set balance and price of item const balance = 500; const jeans = 40; // Check if there are enough funds to purchase item if (jeans <= balance) { console.log("You have enough money to purchase the item!"); }
OutputYou have enough money to purchase the item!
Ta có số dư account là 500
và muốn mua một chiếc quần jean với giá 40
. Sử dụng toán tử nhỏ hơn hoặc bằng toán tử, ta có thể kiểm tra xem giá quần jean có nhỏ hơn hoặc bằng số tiền ta có hay không. Vì jeans <= balance
đánh giá là true
, điều kiện sẽ vượt qua và khối mã sẽ chạy.
Trong một ví dụ mới, ta sẽ tạo một mặt hàng mới trong cửa hàng có giá cao hơn số dư hiện có.
// Set balance and price of item const balance = 500; const phone = 600; // Check if there is enough funds to purchase item if (phone <= balance) { console.log("You have enough money to purchase the item!"); }
Ví dụ này sẽ không có kết quả , vì phone <= balance
đánh giá là false
. Khối mã đơn giản sẽ bị bỏ qua và chương trình sẽ chuyển sang dòng tiếp theo.
Tuyên bố khác
Với if
báo cáo, ta chỉ thực thi mã khi một tuyên bố để đánh giá true
, nhưng thường ta sẽ muốn cái gì khác xảy ra nếu tình trạng này không.
Ví dụ: ta có thể cần hiển thị thông báo cho user biết trường nào đã được điền chính xác nếu biểu mẫu không được gửi đúng cách. Trong trường hợp này, ta sẽ sử dụng câu lệnh else
, đây là mã sẽ thực thi nếu điều kiện ban đầu không thành công.
Các else
tuyên bố được viết sau if
tuyên bố, và nó không có điều kiện trong ngoặc đơn. Đây là cú pháp cho câu lệnh if...else
cơ bản.
if (condition) { // code that will execute if condition is true } else { // code that will execute if condition is false }
Sử dụng ví dụ tương tự như trên, ta có thể thêm một thông báo để hiển thị nếu số tiền trong account quá thấp.
// Set balance and price of item const balance = 500; const phone = 600; // Check if there is enough funds to purchase item if (phone <= balance) { console.log("You have enough money to purchase the item!"); } else { console.log("You do not have enough money in your account to purchase this item."); }
OutputYou do not have enough money in your account to purchase this item.
Vì điều kiện if
không thành công, mã chuyển sang những gì trong câu lệnh else
.
Điều này có thể rất hữu ích để hiển thị cảnh báo hoặc cho user biết những hành động cần thực hiện để tiếp tục. Thông thường một hành động sẽ được yêu cầu cho cả thành công và thất bại, vì vậy if...else
phổ biến hơn câu lệnh if
solo.
Khác nếu Tuyên bố
Với if
và else
, ta có thể chạy các khối mã tùy thuộc vào điều kiện là true
hay false
. Tuy nhiên, đôi khi ta có thể có nhiều điều kiện và kết quả kết quả , và cần nhiều hơn hai tùy chọn. Một cách để làm điều này là với câu lệnh else if
, câu lệnh này có thể đánh giá nhiều hơn hai kết quả có thể xảy ra.
Dưới đây là một ví dụ cơ bản của một khối mã có chứa một if
tuyên bố, nhiều else if
báo cáo, và một else
tuyên bố trong trường hợp không có điều kiện đánh giá để true
.
if (condition a) { // code that will execute if condition a is true } else if (condition b) { // code that will execute if condition b is true } else if (condition c) { // code that will execute if condition c is true } else { // code that will execute if all above conditions are false }
JavaScript sẽ cố gắng chạy tất cả các câu lệnh theo thứ tự, và nếu không câu lệnh nào thành công, nó sẽ mặc định là khối else
.
Bạn có thể có nhiều câu lệnh else if
cần thiết. Trong trường hợp có nhiều câu lệnh else if
, câu lệnh switch
có thể được ưu tiên hơn để dễ đọc.
Như một ví dụ về nhiều câu lệnh else if
, ta có thể tạo một ứng dụng chấm điểm sẽ xuất ra điểm chữ cái dựa trên điểm trên 100.
Các yêu cầu của ứng dụng này như sau:
- Điểm 90 trở lên là A
- Hạng 80 đến 89 là hạng B
- Hạng 70 đến 79 là điểm C
- Hạng 60 đến 69 là hạng D
- Điểm 59 trở xuống là điểm F
Dưới đây, ta sẽ tạo một tập hợp đơn giản gồm các câu lệnh if
, else
và else if
và kiểm tra chúng theo điểm đã cho.
// Set the current grade of the student let grade = 87; // Check if grade is an A, B, C, D, or F if (grade >= 90) { console.log("A"); } else if (grade >= 80) { console.log("B"); } else if (grade >= 70) { console.log("C"); } else if (grade >= 60) { console.log("D"); } else { console.log("F"); }
OutputB
Trong ví dụ của ta , trước tiên ta kiểm tra điểm cao nhất, sẽ lớn hơn hoặc bằng 90
. Sau đó, các câu lệnh else if
sẽ kiểm tra lớn hơn 80
, 70
và 60
cho đến khi nó đạt đến giá trị mặc định else
là điểm không đạt.
Mặc dù về mặt kỹ thuật, giá trị grade
87
của ta cũng đúng với C
, D
và F
, các câu lệnh sẽ dừng lại ở câu đầu tiên thành công. Do đó, ta nhận được kết quả là B
, là kết quả phù hợp đầu tiên.
Nhà điều hành bậc ba
Toán tử bậc ba , còn gọi là toán tử điều kiện, được sử dụng như viết tắt cho một câu lệnh if...else
.
(Một nhà điều hành ternary được viết với cú pháp của một dấu hỏi ?
) Tiếp theo là dấu hai chấm ( :
), như chứng minh dưới đây.
(condition) ? expression on true : expression on false
Trong câu lệnh trên, điều kiện được viết đầu tiên, sau đó là dấu ?
. Biểu thức đầu tiên sẽ thực thi trên true
và biểu thức thứ hai sẽ thực thi trên false
. Nó rất giống với câu lệnh if...else
, với cú pháp nhỏ gọn hơn.
Trong ví dụ này, ta sẽ tạo một chương trình kiểm tra xem user có 21
tuổi trở lên hay không. Nếu có, nó sẽ in "You may enter"
vào console . Nếu không, nó sẽ in "You may not enter."
vào console .
// Set age of user let age = 20; // Place result of ternary operation in a variable const oldEnough = (age >= 21) ? "You may enter." : "You may not enter."; // Print output oldEnough;
Output'You may not enter.'
Vì age
của user dưới 21
, thông báo lỗi được xuất ra console . if...else
tương đương với điều này sẽ là "You may enter."
trong if
tuyên bố, và "You may not enter."
trong câu lệnh else
.
Kết luận
Các câu lệnh có điều kiện cung cấp cho ta khả năng kiểm soát stream để xác định kết quả của các chương trình của ta . Chúng là một trong những nền tảng cơ bản của lập trình và có thể được tìm thấy trong hầu hết các ngôn ngữ lập trình.
Trong bài viết này, ta đã tìm hiểu về cách sử dụng các từ khóa if
, else
và else if
lồng ghép các câu lệnh được bao phủ và cách sử dụng toán tử bậc ba.
Các tin liên quan
Hiểu các đối tượng trong JavaScript2017-08-24
Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
2017-08-15
Cách chuyển đổi kiểu dữ liệu trong JavaScript
2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
2017-08-10
Cách viết chương trình JavaScript đầu tiên của bạn
2017-08-02
Hiểu mảng trong JavaScript
2017-07-28
Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12