Toán tử điều kiện hoặc dấu chấm hỏi, được biểu thị bằng một ?, là một trong những tính năng mạnh mẽ nhất trong JavaScript. Các ? toán tử được sử dụng trong các câu lệnh có điều kiện và khi được ghép nối với một :có thể hoạt động như một sự thay thế nhỏ gọn cho if...else các câu lệnh.
Nhưng có nhiều thứ hơn là bắt mắt. Có ba cách sử dụng chính cho ? toán tử, hai trong số đó bạn có thể chưa sử dụng hoặc thậm chí chưa từng nghe đến. Hãy tìm hiểu về tất cả chúng một cách chi tiết.
Ba cách sử dụng chính của dấu chấm hỏi (?) trong JavaScript:
- Toán tử bậc ba
- Chuỗi tùy chọn
- Kết hợp Nullish
Chúng ta sẽ xem xét chi tiết từng vấn đề này, bắt đầu với cách phổ biến nhất mà bạn sẽ thấy ? toán tử đang được sử dụng – như một toán tử bậc ba.
1. Toán tử bậc ba
Thuật ngữ bộ ba có nghĩa là bao gồm ba mục hoặc bộ phận. Các ? toán tử còn được gọi là toán tử bậc ba bởi vì, không giống như các toán tử khác như nghiêm ngặt bằng (===) hoặc số dư (%), nó là cái duy nhất có ba toán hạng.
Bắt đầu với ?, chúng ta thêm một điều kiện ở bên trái và một giá trị ở bên phải để trả về khi điều kiện là đúng. Sau đó, chúng tôi thêm một dấu hai chấm (:) theo sau là một giá trị để trả về nếu điều kiện là sai.
Toán tử bậc ba về cơ bản là một lối tắt cho một toán tử truyền thống if...else bản tường trình.
Hãy so sánh một toán tử bậc ba với một toán tử dài hơn if...else bản tường trình:
Ở đây, toán tử bậc ba chỉ chiếm một dòng mã, trong khi if...else mất bảy dòng.
Sử dụng một toán tử ternary hiệu quả hơn nhiều, phải không?
2. Chuỗi tùy chọn
Vào năm 2020, một tính năng mới tuyệt vời được gọi là Chuỗi tùy chọn đã được giới thiệu.
Để hiểu cách nó hoạt động, hãy tưởng tượng kịch bản này.
Giả sử bạn có mã gọi một thuộc tính đối tượng không tồn tại, điều này gây ra lỗi khi chạy. Điều này có thể là do giá trị bị thiếu hoặc không xác định trong cơ sở dữ liệu của bạn hoặc từ API:
TypeError: Cannot read property ‘salary’ of undefinedNhờ Chuỗi tùy chọn, bạn có thể chỉ cần chèn một ? giữa tên thuộc tính và khoảng thời gian giữa thuộc tính tiếp theo.
Với điều đó, nó sẽ chỉ trở lại undefined thay vì ném một lỗi xấu xí.
Chuỗi tùy chọn thực sự là một tính năng thay đổi cuộc sống cho các nhà phát triển JavaScript.
3. Hợp nhất vô hiệu
Trong một số trường hợp, bạn phải đặt giá trị mặc định cho tên hoặc giá trị thuộc tính bị thiếu.
Ví dụ: giả sử chúng ta đang tạo Ứng dụng thời tiết trong đó chúng ta đang tìm nạp nhiệt độ, độ ẩm, tốc độ gió, áp suất, thời gian mặt trời mọc và lặn cũng như hình ảnh thành phố. Chúng tôi đã nhập một địa điểm, giả sử Bangalorenhưng vì lý do nào đó, hình ảnh của nó không có trong cơ sở dữ liệu.
Khi ứng dụng tìm nạp và hiển thị dữ liệu, hình ảnh sẽ trống, trông có thể xấu. Trong trường hợp đó, điều chúng tôi có thể làm là đặt hình ảnh mặc định cho những thành phố không có hình ảnh, trong trường hợp của chúng tôi là Bangalore.
Bằng cách này, khi ứng dụng hiển thị dữ liệu, hình ảnh mặc định sẽ ở đó cho các thành phố không có hình ảnh.
Bạn có thể làm điều này bằng cách sử dụng || toán tử, được gọi là toán tử logic OR:
Nhưng nếu bạn sử dụng || để cung cấp một giá trị mặc định, bạn có thể gặp phải các hành vi không mong muốn nếu bạn coi một số giá trị là có thể sử dụng được (ví dụ: '' hoặc ).
Hãy xem xét một kịch bản trong đó một biến có giá trị bằng 0 hoặc một chuỗi rỗng. Nếu chúng ta sử dụng (||), nó sẽ được coi là không xác định hoặc NULL và trả về một số giá trị mặc định mà chúng tôi đã sửa.
Thay vì logic OR (||), bạn có thể sử dụng dấu chấm hỏi kép (??) hoặc Nullish Coalescing.
Hãy tìm hiểu với một ví dụ.
const value1 = 0 || 'default string';
console.log(value1);
const value2 = '' || 1000;
console.log(value2);||)Ở đây, chúng ta có ‘0’ và ‘chuỗi mặc định’ trong giá trị biến1. Nếu chúng tôi ghi giá trị của nó vào bảng điều khiển, chúng tôi sẽ nhận được ‘chuỗi mặc định’, điều này thật kỳ lạ. Thay vì chuỗi mặc định, chúng ta sẽ nhận được 0, vì 0 không phải là không xác định hoặc null. Cho nên, ‘||‘ không thể thực hiện công việc ở đây.
Tương tự, nó giống với value2.
||‘const value1 = 0 ?? 'default string';
console.log(value1);
const value2 = '' ?? 1000;
console.log(value2);Nhưng nếu chúng ta thay thế ‘||‘ với ‘??‘, chúng ta sẽ nhận được 0 và một chuỗi rỗng, điều này làm cho nó thật tuyệt.
??‘Nullish Coalescing hoạt động chính xác như toán tử OR logic, ngoại trừ bạn sẽ nhận được giá trị bên phải khi giá trị bên trái là undefined hoặc null.
Nói cách khác, ?? chỉ cho phép undefined và null giá trị, không phải chuỗi rỗng ('') hoặc S.
Phần kết luận
Bây giờ hy vọng bạn hiểu làm thế nào các ? toán tử hoạt động trong JavaScript. Trông có vẻ đơn giản, nhưng đó là một trong những ký tự mạnh mẽ nhất trong ngôn ngữ. Nó cung cấp đường cú pháp theo ba cách tuyệt vời nhưng khác nhau.
Hãy thử chúng và cho tôi biết nó diễn ra như thế nào.
Chúc bạn học tập vui vẻ!
