Dernullish coalescing (??) Operator ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operandnull oderundefined ist, andernfalls gibt er seinen linken Operanden zurück.

Probieren Sie es aus

const foo = null ?? "default string";console.log(foo);// Expected output: "default string"const baz = 0 ?? 42;console.log(baz);// Expected output: 0

Syntax

leftExpr ?? rightExpr

Beschreibung

Der nullish coalescing Operator kann als ein Sonderfall deslogischen ODER-Operators (||) angesehen werden. Letzterer gibt den rechten Operanden zurück, wenn der linke Operand irgendeinenfalsy Wert hat, nicht nurnull oderundefined. Mit anderen Worten, wenn Sie|| verwenden, um einem anderen Variablenfoo einen Standardwert zuzuweisen, könnten unerwartete Verhaltensweisen auftreten, wenn Sie einigefalsy Werte als verwendbar betrachten (z.B.'' oder0). Sieheunten für weitere Beispiele.

Der nullish coalescing Operator hat die fünfthöchsteOperator-Priorität, direkt niedriger als|| und direkt höher als derBedingungsoperator (ternär).

Es ist nicht möglich, die AND (&&) oder OR-Operatoren (||) direkt mit?? zu kombinieren. EinSyntaxfehler wird in solchen Fällen ausgelöst.

null || undefined ?? "foo"; // raises a SyntaxErrortrue && undefined ?? "foo"; // raises a SyntaxError

Stattdessen stellen Sie Klammern bereit, um die Priorität explizit anzuzeigen:

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

Beispiele

Verwendung des nullish coalescing Operators

In diesem Beispiel werden wir Standardwerte bereitstellen, aber andere alsnull oderundefined beibehalten.

const nullValue = null;const emptyText = ""; // falsyconst 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

Zuweisung eines Standardwerts zu einer Variablen

Früher, wenn man einem Variablen einen Standardwert zuweisen wollte, war ein häufig verwendetes Muster, den logischen ODER-Operator (||) zu verwenden:

let foo;// foo is never assigned any value so it is still undefinedconst someDummyText = foo || "Hello!";

Aufgrund dessen, dass|| ein boolescher logischer Operator ist, wurde der linke Operand für die Auswertung zu einem Boolean konvertiert, und jederfalsy Wert (einschließlich0,'',NaN,false, etc.) wurde nicht zurückgegeben. Dieses Verhalten kann unerwartete Konsequenzen haben, wenn Sie0,'' oderNaN als gültige Werte betrachten.

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

Der nullish coalescing Operator vermeidet diesen Fallstrick, indem er nur den zweiten Operanden zurückgibt, wenn der erste entwedernull oderundefined ist (aber keine anderen falschen Werte):

const myText = ""; // An empty string (which is also a falsy value)const notFalsyText = myText || "Hello world";console.log(notFalsyText); // Hello worldconst preservingFalsy = myText ?? "Hi neighborhood";console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

Short-Circuiting

Wie bei den logischen Operatoren 'ODER' und 'UND' wird der Ausdruck auf der rechten Seite nicht ausgewertet, wenn die linke Seite sich als wedernull nochundefined erweist.

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 evaluatedconsole.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

Beziehung zum optionalen Verkettungsoperator (?.)

Der nullish coalescing Operator behandeltundefined undnull als spezifische Werte. Das Gleiche gilt für denoptionalen Verkettungsoperator (?.), der nützlich ist, um auf eine Eigenschaft eines Objekts zuzugreifen, dasnull oderundefined sein könnte. Indem man sie kombiniert, kann man sicher auf eine Eigenschaft eines Objekts zugreifen, das nullish sein könnte und einen Standardwert bereitstellen, wenn es so ist.

const foo = { someFooProp: "hi" };console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Nullish coalescing Zuweisung (??=)
• Optionale Verkettung (?.)
• Logisches ODER (||)
• Standardparameter