Hướng dẫn what is null coalescing operator in javascript? - toán tử liên kết null trong javascript là gì?

Thử nó

Cú pháp

Ví dụ

Sử dụng nhà điều hành liên kết nullish

Trong ví dụ này, chúng tôi sẽ cung cấp các giá trị mặc định nhưng giữ các giá trị khác với null hoặc

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

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

Gán giá trị mặc định cho một biến

Trước đó, khi người ta muốn gán giá trị mặc định cho một biến, một mẫu chung là sử dụng logic hoặc toán tử (

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

Tuy nhiên, do

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

const count = 0;
const text = "";

const qty = count || 42;
const message = text || "hi!";
console.log(qty);     // 42 and not 0
console.log(message); // "hi!" and not ""

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

const count = 0;
const text = "";

const qty = count || 42;
const message = text || "hi!";
console.log(qty);     // 42 and not 0
console.log(message); // "hi!" and not ""

const count = 0;
const text = "";

const qty = count || 42;
const message = text || "hi!";
console.log(qty);     // 42 and not 0
console.log(message); // "hi!" and not ""

Toán tử kết hợp nullish tránh được cạm bẫy này bằng cách chỉ trả lại toán hạng thứ hai khi cái đầu tiên đánh giá thành null hoặc

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

const myText = ''; // An empty string (which is also a falsy value)

const notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

Short-circuiting

Giống như các toán tử OR và và logic, biểu thức bên phải không được đánh giá nếu phía bên trái chứng minh là không null cũng không

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}

console.log(A() ?? C());
// logs "A was called" then "C was called" and then "foo"
// as A() returned undefined so both expressions are evaluated

console.log(B() ?? C());
// logs "B was called" then "false"
// as B() returned false (and not null or undefined), the right
// hand side expression was not evaluated

Không có chuỗi với và hoặc các nhà khai thác

Không thể kết hợp cả và (

const myText = ''; // An empty string (which is also a falsy value)

const notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

const myText = ''; // An empty string (which is also a falsy value)

const notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

null || undefined ?? "foo"; // raises a SyntaxError
true || undefined ?? "foo"; // raises a SyntaxError

Tuy nhiên, việc cung cấp dấu ngoặc đơn để chỉ ra một cách rõ ràng ưu tiên là chính xác:

(null || undefined) ?? "foo"; // returns "foo"

Mối quan hệ với toán tử chuỗi tùy chọn (const myText = ''; // An empty string (which is also a falsy value) const notFalsyText = myText || 'Hello world'; console.log(notFalsyText); // Hello world const preservingFalsy = myText ?? 'Hi neighborhood'; console.log(preservingFalsy); // '' (as myText is neither undefined nor null) 9)

Toán tử kết hợp nullish coi ____10 và null là các giá trị cụ thể và toán tử chuỗi tùy chọn (

const myText = ''; // An empty string (which is also a falsy value)

const notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

let foo;

//  foo is never assigned any value so it is still undefined
const someDummyText = foo || 'Hello!';

const foo = { someFooProp: "hi" };

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

Xem thêm