Der bedingte (ternäre) Operator ist der einzige Operator in JavaScript, der drei Operanden hat. Er wird häufig als Kurzform eines if
Statements genutzt.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
Bedingung ? Ausdruck1: Ausdruck2
Parameter
Bedingung (oder Bedingungen)
- Ein Ausdruck, der zu
true
oderfalse
ausgewertet wird.
Ausdruck1
,Ausdruck2
- Ausdrücke mit Werten eines beliebigen Typs.
Beschreibung
Wenn Bedingung
zu true
ausgewertet wird, wird Ausdruck1
zurückgegeben; andernfalls wird Ausdruck2
zurückgegeben.
Ein einfaches Beispiel zeigt dieser Test, ob man in den USA alt genug ist, um Alkohol zu trinken.
var age = 26;
var canDrinkAlcohol = (age >= 21) ? "True, 21 or older" : "False, under 21";
console.log(canDrinkAlcohol); // "True, 21 or older"
Ein anderes Beispiel ist die Anzeige von verschiedenen Nachrichten, abhängig von der isMember
Variable:
"The fee is " + (isMember ? "$2.00" : "$10.00")
Man kann auch Variablen abhängig von einem ternären Ergebnis zuweisen:
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
Mehrere ternäre Auswertungen hintereinander sind ebenfalls möglich (Beachte: der ternäre Operator ist rechtsassoziativ):
var firstCheck = false,
secondCheck = false,
access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
console.log(access); // logt "Access granted"
Man kann ihn auch wie ein If Statement mit mehreren Bedingungen verwenden
var condition1 = true,
condition2 = false,
access = condition1 ? (condition2 ? "true true" : "true false") : (condition2 ? "false true" : "false false");
console.log(access); // logt "true false"
Zu beachten ist, dass die Klammern nicht notwendig sind und das Ergebnis nicht verändern. Sie sind zur Übersichtshilfe vorhanden.
Man kann den ternären Operator alleinstehend verwenden, um verschiedene Operationen auszuführen:
var stop = false, age = 16;
age > 18 ? location.assign("continue.html") : stop = true;
Man kann auch mehr als eine Operation pro Fall ausführen, indem die Operationen mit einem Komma getrennt und geklammert werden:
var stop = false, age = 23;
age > 18 ? (
alert("OK, you can go."),
location.assign("continue.html")
) : (
stop = true,
alert("Sorry, you are much too young!")
);
Man kann auch mehrere Operationen während einer Zuweisung durchführen. In diesem Fall wird der letzte von Kommas getrennte Wert als Zuweisungswert benutzt.
var age = 16;
var url = age > 18 ? (
alert("OK, you can go."),
// alert liefert "undefined" zurück, wird aber ignoriert
// weil es nicht der letzte Ausdruck in der Klammer ist.
"continue.html" // dieser Wert wird zugewiesen, wenn der
//Wert > 18 ist.
) : (
alert("You are much too young!"),
alert("Sorry :-("),
// etc. etc.
"stop.html" // dieser Wert wird zugewiesen wenn "age" <= 18 ist;
location.assign(url); // "stop.html"
Rückgabe durch ternäre Statements
Der ternäre Operator ist nützlich für Funktionen, die einen Rückgabewert abhängig von einem if/else
Statement zurückgeben.
var func1 = function ( .. ) {
if (condition1) { return value1; }
else { return value2; }
}
var func2 = function ( .. ) {
return condition1 ? value1 : value2;
}
Ein häufiger Weg, um das legale Alter zum Trinken von Alkohol in den USA zurückzugeben:
function canDrinkAlcohol(age) {
return (age > 21) ? "True, over 21" : "False, under 21";
}
var output = canDrinkAlcohol(26);
console.log(output); // "True, over 21"
Ein guter Weg, um herauszufinden, ob der ternäre Operator ein guter Ersatz für ein if/else
Statement ist, ist wenn das return
Schlüsselwort mehrfach eingesetzt wird und in jedem Block der einzige Ausdruck ist.
Beim Aufteilen des ternären Operators in mehrere Zeilen und extra Leerzeichen, kann dieser ein sehr sauberer Ersatz für eine längere Serie von if/else
Statements sein. Dadurch wird ein leichter Weg für logisch gleiche Ausdrücke geschaffen:
var func1 = function ( .. ) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
var func2 = function ( .. ) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
ECMAScript (ECMA-262) Die Definition von 'Conditional Operator' in dieser Spezifikation. |
Lebender Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) Die Definition von 'Conditional Operator' in dieser Spezifikation. |
Standard | |
ECMAScript 5.1 (ECMA-262) Die Definition von 'The conditional operator' in dieser Spezifikation. |
Standard | |
ECMAScript 1st Edition (ECMA-262) Die Definition von 'The conditional operator' in dieser Spezifikation. |
Standard | Initiale Definition. Implementiert in JavaScript 1.0. |
Browserkompatibilität
BCD tables only load in the browser