JavaScript: Nullish coalescing operator (??)

Toán tử kết hợp nullish (??) là một toán tử logic trả về toán hạng bên phải của nó khi toán hạng bên trái của nó là null hoặc không xác định, và nếu không trả về toán hạng bên trái của nó.

Đây có thể được coi là một trường hợp đặc biệt của toán tử logic OR (||), trả về toán hạng bên phải nếu toán hạng bên trái là bất kỳ giá trị sai nào, không chỉ null hoặc không xác định. Nói cách khác, nếu bạn sử dụng || để cung cấp một số giá trị mặc định cho foo biến khác, 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ị giả là có thể sử dụng được (ví dụ: '' hoặc 0). Xem bên dưới để biết thêm ví dụ.

Toán tử kết hợp nullish có ưu tiên toán tử thấp thứ năm, trực tiếp thấp hơn || và cao hơn trực tiếp so với toán tử có điều kiện (bậc ba).

const nullValue = null;

const emptyText = ""; // falsy

const someNumber = 42;

const valA = nullValue ?? "default for A";

const valB = emptyText ?? "default for B";

const valC = someNumber ?? 0;

console.log(valA); // "default for A"

console.log(valB); // "" (as the empty string is not null or undefined)

console.log(valC); // 42

Tuy nhiên, do || là toán tử logic boolean, toán hạng bên trái bị ép buộc thành boolean để đánh giá và bất kỳ giá trị sai nào (0, '', NaN, null, undefined) không được trả về. Hành vi này có thể gây ra hậu quả không mong muốn nếu bạn coi 0, '' hoặc NaN là các giá trị hợp lệ.

Relationship with the optional chaining operator (?.)

Toán tử liên kết nullish coi các giá trị không xác định và null là các giá trị cụ thể và toán tử chuỗi tùy chọn (?.) Cũng vậy, hữu ích để truy cập thuộc tính của một đối tượng có thể là null hoặc không xác định.

const foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"