Nếu bạn đã từng xem code JavaScript và tự hỏi ? và : làm cái quái gì vậy, không cần tìm đâu xa!

Hai ký tự (? :) này khi được sử dụng cùng nhau được gọi chung là toán tử điều kiện bậc ba, hay viết tắt là bậc ba. Nó được sử dụng để diễn đạt một hoạt động có điều kiện cơ bản, ở dạng:

predicate ? truthy : falsey

Toán hạng đứng trước dấu ? là vị từ hoặc biểu thức mà bạn đang dựa trên logic quyết định của mình. Biểu thức sau dấu ? sẽ là những gì được thực thi nếu vị từ là true. Biểu thức sau : là những gì được thực thi nếu vị từ sai

Example

Hãy tưởng tượng bạn có một đối tượng đại diện cho a user và nó có khả năng có một khóa username lưu trữ tên người dùng đó. Nếu chúng tôi muốn xác định những gì sẽ hiển thị trong giao diện người dùng, chúng tôi có thể quyết định hiển thị tên người dùng nếu nó tồn tại hoặc Ẩn danh nếu nó không. Chúng tôi có thể nhanh chóng tạo một biến được gọi là tên người dùng sẽ giữ giá trị chính xác:

const username = user.username ? user.username : 'Anonymous';

Điều này sẽ trái ngược với việc viết cùng một chức năng với câu lệnh if truyền thống:

let username;

if (user.username) {
    username = user.username;
} else {
    username = 'Anonymous';
}

Tất nhiên, hai biểu thức sau ? có thể là bất kỳ thứ gì đánh giá thành giá trị:

const someVal = checkSomething() ? doCoolThingSinceTrue() : doOtherLogicSinceFalse();

Suggestions

Phần này là cố ý, nhưng tôi cố gắng tránh sử dụng nhiều toán tử ba ngôi được xâu chuỗi lại với nhau. Không có gì ngăn cản bạn làm:

const res = check() ? (checkTwo ? 'true checkTwo' : 'false checkTwo') : 'false check';

nhưng theo tôi điều này gây ra nhiều nhầm lẫn hơn là rõ ràng và sẽ tốt hơn nếu viết nó theo cấu trúc if / else truyền thống hơn.

Tôi thường thích ba ngôi hơn nếu đó là một phép tính 'nội tuyến' nhanh chóng mà tôi đang truyền dưới dạng tham số hoặc giống như trong ví dụ ban đầu, tôi đang chọn một trong hai biểu thức để thực thi trong thời gian chạy và tôi cần kết quả.

Tổng kết

Hy vọng rằng điều đó sẽ giúp làm rõ tất cả những gì về toán tử này và cách nó có thể được sử dụng. Nếu bạn có bất kỳ câu hỏi nào, hãy hỏi chúng tôi ở bên dưới!

Bài viết gốc tại đây.

Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Với cả hai hình thức là đào tạo Offline và học trực tuyến có tương tác. Và vẫn đảm bảo việc làm cho học viên tốt nghiệp đối với cả hai hình thức đào tạo.

Chi tiết khóa học: https://frontend.techmaster.vn/.

Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).