Bedingungsoperator (ternärer Operator)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der Bedingungsoperator (ternärer Operator) ist der einzige JavaScript-Operator, der drei Operanden benötigt:
eine Bedingung, gefolgt von einem Fragezeichen (?
), dann einem Ausdruck, der ausgeführt wird, wenn die Bedingung truthy ist, gefolgt von einem Doppelpunkt (:
) und schließlich dem Ausdruck, der ausgeführt wird, wenn die Bedingung falsy ist.
Dieser Operator wird häufig als Alternative zu einer if...else
-Anweisung verwendet.
Probieren Sie es aus
function getFee(isMember) {
return isMember ? "$2.00" : "$10.00";
}
console.log(getFee(true));
// Expected output: "$2.00"
console.log(getFee(false));
// Expected output: "$10.00"
console.log(getFee(null));
// Expected output: "$10.00"
Syntax
condition ? exprIfTrue : exprIfFalse
Parameter
condition
-
Ein Ausdruck, dessen Wert als Bedingung verwendet wird.
exprIfTrue
-
Ein Ausdruck, der ausgeführt wird, wenn die
condition
einen truthy-Wert hat (einen Wert, dertrue
ist oder intrue
umgewandelt werden kann). exprIfFalse
-
Ein Ausdruck, der ausgeführt wird, wenn die
condition
falsy ist (das heißt, einen Wert hat, der infalse
umgewandelt werden kann).
Beschreibung
Neben false
sind mögliche falsy-Ausdrücke: null
, NaN
, 0
, der leere String (""
) und undefined
.
Wenn condition
einer dieser Werte ist, wird das Ergebnis des bedingten Ausdrucks das Ergebnis der Ausführung des Ausdrucks exprIfFalse
sein.
Beispiele
Ein einfaches Beispiel
const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
Umgang mit null
-Werten
Eine häufige Verwendung ist der Umgang mit einem Wert, der möglicherweise null
ist:
const greeting = (person) => {
const name = person ? person.name : "stranger";
return `Howdy, ${name}`;
};
console.log(greeting({ name: "Alice" })); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"
Bedingte Verkettungen
Der ternäre Operator ist rechtassoziativ, was bedeutet, dass er folgendermaßen "verkettet" werden kann, ähnlich wie eine if … else if … else if … else
-Kette:
function example() {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
Dies entspricht der folgenden if...else
-Kette:
function example() {
if (condition1) {
return value1;
} else if (condition2) {
return value2;
} else if (condition3) {
return value3;
} else {
return value4;
}
}
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # sec-conditional-operator |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Conditional operator ( c ? t : f ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support