Nullish coalescing-Operator (??)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Der Nullish coalescing (??
)-Operator ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null
oder undefined
ist, und andersherum seinen linken Operanden zurückgibt.
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 Spezialfall des logischen ODER-Operators (||
) betrachtet werden. Letzterer gibt den rechten Operanden zurück, wenn der linke Operand ein beliebiger falsy Wert ist, nicht nur null
oder undefined
. Mit anderen Worten: Wenn Sie ||
verwenden, um einen Standardwert für eine andere Variable foo
anzugeben, können unerwartete Verhaltensweisen auftreten, falls Sie einige falsy Werte als nützlich betrachten (z. B. ''
oder 0
). Siehe unten für weitere Beispiele.
Der Nullish coalescing-Operator hat die fünft-niedrigste Operator-Priorität, direkt niedriger als ||
und direkt höher als der konjunktive (ternäre) Operator.
Es ist nicht möglich, den AND-Operator (&&
) und den OR-Operator (||
) direkt mit ??
zu kombinieren. In solchen Fällen wird ein Syntaxfehler ausgelöst.
null || undefined ?? "foo"; // raises a SyntaxError
true && undefined ?? "foo"; // raises a SyntaxError
Stattdessen verwenden Sie Klammern, um die Priorität explizit anzugeben:
(null || undefined) ?? "foo"; // returns "foo"
Beispiele
Verwendung des Nullish coalescing-Operators
In diesem Beispiel stellen wir Standardwerte bereit, behalten jedoch andere Werte als null
oder undefined
bei.
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
Zuweisung eines Standardwertes zu einer Variable
Früher war es beim Zuweisen eines Standardwertes zu einer Variable üblich, den logischen ODER-Operator (||
) zu verwenden:
let foo;
// foo is never assigned any value so it is still undefined
const someDummyText = foo || "Hello!";
Aufgrund der Tatsache, dass ||
ein boolescher logischer Operator ist, wurde der linke Operand für die Auswertung in einen booleschen Wert umgewandelt, und jeder falsy Wert (einschließlich 0
, ''
, NaN
, false
, etc.) wurde nicht zurückgegeben. Dieses Verhalten kann unerwartete Konsequenzen haben, wenn Sie 0
, ''
oder NaN
als gültige Werte betrachten.
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 ""
Der Nullish coalescing-Operator umgeht dieses Problem, indem er nur den zweiten Operanden zurückgibt, wenn der erste entweder null
oder undefined
ist (aber keine anderen falsy Werte):
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
Wie bei den logischen ODER- und UND-Operatoren wird der rechte Ausdruck nicht ausgewertet, wenn der linke Ausdruck weder null
noch undefined
ist.
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
Beziehung zum Optional Chaining-Operator (?.)
Der Nullish coalescing-Operator behandelt undefined
und null
als spezifische Werte. Dies tut auch der Optional Chaining-Operator (?.
), der nützlich ist, um auf eine Eigenschaft eines Objekts zuzugreifen, das möglicherweise null
oder undefined
ist. Durch die Kombination können Sie sicher auf eine Eigenschaft eines Objekts zugreifen, das möglicherweise nullish ist, und einen Standardwert bereitstellen, falls dies der Fall ist.
const foo = { someFooProp: "hi" };
console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # prod-CoalesceExpression |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Nullish coalescing operator ( ?? ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support