Một toán tử bậc ba có thể được sử dụng để thay thế một câu lệnh if..else
trong một số tình huống nhất định. Trước khi bạn tìm hiểu về các toán tử bậc ba, hãy nhớ kiểm tra JavaScript nếu. hướng dẫn khác
Toán tử ternary là gì?
Toán tử bậc ba đánh giá một điều kiện và thực thi một khối mã dựa trên điều kiện
Cú pháp của nó là
condition ? expression1 : expression2
Toán tử ternary đánh giá điều kiện kiểm tra
- Nếu điều kiện là
0, biểu thức 1 được thực hiện// program to check pass or fail let marks = prompt['Enter your marks :']; // check the condition let result = [marks >= 40] ? 'pass' : 'fail'; console.log[`You ${result} the exam.`];
- Nếu điều kiện là
1, biểu thức 2 được thực hiện// program to check pass or fail let marks = prompt['Enter your marks :']; // check the condition let result = [marks >= 40] ? 'pass' : 'fail'; console.log[`You ${result} the exam.`];
Toán tử bậc ba nhận ba toán hạng, do đó, tên toán tử bậc ba. Nó còn được gọi là toán tử có điều kiện
Hãy viết một chương trình để xác định xem một học sinh đạt hay trượt trong kỳ thi dựa trên số điểm đạt được
Thí dụ. Toán tử bậc ba JavaScript
// program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
Đầu ra 1
Enter your marks: 78 You pass the exam.
Giả sử người dùng nhập 78. Sau đó, điều kiện
// program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
2 được kiểm tra để đánh giá thành // program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
0. Vì vậy, biểu thức đầu tiên // program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
4 được gán cho biến kết quảĐầu ra 2
________số 8_______Giả sử sử dụng nhập 35. Sau đó, điều kiện
// program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
2 đánh giá thành // program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
1. Vì vậy, biểu thức thứ hai // program to check pass or fail
let marks = prompt['Enter your marks :'];
// check the condition
let result = [marks >= 40] ? 'pass' : 'fail';
console.log[`You ${result} the exam.`];
7 được gán cho biến kết quảToán tử bậc ba được sử dụng thay cho if. khác
Trong JavaScript, một toán tử bậc ba có thể được sử dụng để thay thế một số loại câu lệnh if..else
nhất định. Ví dụ,
Bạn có thể thay thế mã này
// check the age to determine the eligibility to vote
let age = 15;
let result;
if [age >= 18] {
result = "You are eligible to vote.";
} else {
result = "You are not eligible to vote yet.";
}
console.log[result];
với
// ternary operator to check the eligibility to vote
let age = 15;
let result =
[age >= 18] ? "You are eligible to vote." : "You are not eligible to vote yet";
console.log[result];
Đầu ra của cả hai chương trình sẽ giống nhau
đầu ra
You are not eligible to vote yet.
Toán tử ternary lồng nhau
Bạn cũng có thể lồng một toán tử bậc ba làm biểu thức bên trong một toán tử bậc ba khác. Ví dụ,
// program to check if number is positive, negative or zero
let a = 3;
let result = [a >= 0] ? [a == 0 ? "zero" : "positive"] : "negative";
console.log[`The number is ${result}.`];
đầu ra
The number is positive.
Ghi chú. Bạn nên cố gắng tránh các toán tử bậc ba lồng nhau bất cứ khi nào có thể vì chúng làm cho mã của bạn khó đọc
Toán tử điều kiện hoặc dấu chấm hỏi, được đại diện bởi một ?
, là một trong những tính năng mạnh mẽ nhất trong JavaScript. Toán tử ?
được sử dụng trong các câu điều kiện và khi được kết hợp với một ____29_______, có thể hoạt động như một sự thay thế nhỏ gọn cho các câu lệnh if...else
Nhưng có nhiều thứ hơn là bắt mắt. Có ba cách sử dụng chính của toán tử ?
, hai trong số đó bạn có thể chưa từng 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 cho 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. 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ư bằng nghiêm ngặt [
const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
0] hoặc phần dư [const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
1], nó là toán tử duy nhất nhận ba toán hạngBắ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 đúng. Sau đó, chúng tôi thêm dấu hai chấm [_______ 29 _______] theo sau là một giá trị để trả về nếu điều kiện sai
Toán tử bậc ba về cơ bản là một lối tắt cho câu lệnh if...else
truyền thống
Hãy so sánh toán tử bậc ba với câu lệnh if...else
dài hơn
Ở đây, toán tử bậc ba chỉ chiếm một dòng mã, trong khi if...else
chiếm 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 do API
const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
7Nhờ Chuỗi tùy chọn, bạn có thể chỉ cần chèn một ____27_______ giữa tên thuộc tính và khoảng thời gian giữa thuộc tính tiếp theo
Cùng với đó, nó sẽ chỉ trả về
const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
9 thay vì đưa ra 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. Kết hợp Nullish
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, chẳng hạn như Bangalore, nhưng vì lý do nào đó, hình ảnh của địa điểm đó 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ó vẻ xấu. Trong trường hợp đó, những gì chúng tôi có thể làm là đặt ảnh mặc định cho những thành phố không có ả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ử ?
0, được gọi là toán tử logic OR
Nhưng nếu bạn sử dụng ?
0 để 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ụ: ?
2 hoặc ?
3]
Xem xét một kịch bản trong đó một biến có giá trị 0 hoặc một chuỗi rỗng. Nếu chúng tôi sử dụng [?
0], 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ì toán tử logic OR [?
0], bạn có thể sử dụng dấu chấm hỏi kép [?
6] 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];
Với logic HOẶC [?
0]Ở đây, chúng ta có '0' và 'chuỗi mặc định' trong giá trị biến1. Nếu chúng tôi đăng nhập giá trị của nó trong 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. Vì vậy, '?
0' không thực hiện được công việc ở đây
Tương tự, nó giống với value2
?
0'_______17_______With Nullish CoalescingNhưng nếu chúng ta thay thế '?
0' bằng '?
6', chúng ta sẽ nhận được 0 và một chuỗi rỗng, điều này thật tuyệt
?
6'Nullish Coalescing hoạt động chính xác như toán tử logic OR, ngoại trừ bạn sẽ nhận được giá trị bên phải khi giá trị bên trái là
const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
9 hoặc ?
4Nói cách khác, ?
6 chỉ cho phép các giá trị
const value1 = 0 ?? 'default string';
console.log[value1];
const value2 = '' ?? 1000;
console.log[value2];
9 và ?
4, không cho phép các chuỗi trống [?
2] hoặc ?
3sPhần kết luận
Bây giờ, hy vọng bạn đã hiểu cách hoạt động của toán tử ?
trong JavaScript. Trông thì đơn giản, nhưng lại là một trong những ký tự mạnh mẽ nhất trong ngôn tình. 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
học tập vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tôi xây dựng các dự án để tìm hiểu cách hoạt động của mã. Và trong khi tôi không viết mã, tôi thích viết thơ và kể chuyện, chơi piano và nấu những bữa ăn ngon
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu