diff options
Diffstat (limited to 'files/de/web/javascript/reference/operators/conditional_operator')
| -rw-r--r-- | files/de/web/javascript/reference/operators/conditional_operator/index.html | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/operators/conditional_operator/index.html b/files/de/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..895a2c5d55 --- /dev/null +++ b/files/de/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,190 @@ +--- +title: Bedingter (ternärer) Operator +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der<strong> bedingte (ternäre) Operator</strong> ist der einzige Operator in JavaScript, der drei Operanden hat. Er wird häufig als Kurzform eines <a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> Statements genutzt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>Bedingung </em>? <em>Ausdruck1</em>: <em>Ausdruck2</em></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>Bedingung (oder Bedingungen)</code></dt> + <dd>Ein Ausdruck, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd> +</dl> + +<dl> + <dt><code>Ausdruck1</code>, <code>Ausdruck2</code></dt> + <dd>Ausdrücke mit Werten eines beliebigen Typs.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn <code>Bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>Ausdruck1</code> zurückgegeben; andernfalls wird <code>Ausdruck2</code> zurückgegeben.</p> + +<p>Ein einfaches Beispiel zeigt dieser Test, ob man in den USA alt genug ist, um Alkohol zu trinken.</p> + +<pre class="brush: js">var age = 26; +var canDrinkAlcohol = (age >= 21) ? "True, 21 or older" : "False, under 21"; +console.log(canDrinkAlcohol); // "True, 21 or older" +</pre> + +<p>Ein anderes Beispiel ist die Anzeige von verschiedenen Nachrichten, abhängig von der <code>isMember</code> Variable:</p> + +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>Man kann auch Variablen abhängig von einem ternären Ergebnis zuweisen:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>Mehrere ternäre Auswertungen hintereinander sind ebenfalls möglich (Beachte: der ternäre Operator ist rechtsassoziativ):</p> + +<pre class="brush: js">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted"; + +console.log(access); // logt "Access granted"</pre> + +<p>Man kann ihn auch wie ein If Statement mit mehreren Bedingungen verwenden</p> + +<pre class="brush: js">var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true" : "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logt "true false"</pre> + +<p>Zu beachten ist, dass die Klammern nicht notwendig sind und das Ergebnis nicht verändern. Sie sind zur Übersichtshilfe vorhanden.</p> + +<p>Man kann den ternären Operator alleinstehend verwenden, um verschiedene Operationen auszuführen:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>Man kann auch mehr als eine Operation pro Fall ausführen, indem die Operationen mit einem Komma getrennt und geklammert werden:</p> + +<pre class="brush: js">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!") +); +</pre> + +<p>Man kann auch mehrere Operationen während einer Zuweisung durchführen. <em><strong>In diesem Fall wird der letzte von Kommas getrennte Wert als Zuweisungswert benutzt.</strong></em></p> + +<pre class="brush: js">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"</pre> + +<h3 id="Rückgabe_durch_ternäre_Statements">Rückgabe durch ternäre Statements</h3> + +<p>Der ternäre Operator ist nützlich für Funktionen, die einen Rückgabewert abhängig von einem <code>if/else</code> Statement zurückgeben.</p> + +<pre class="brush: js">var func1 = function ( .. ) { + if (condition1) { return value1; } + else { return value2; } +} + +var func2 = function ( .. ) { + return condition1 ? value1 : value2; +}</pre> + +<p>Ein häufiger Weg, um das legale Alter zum Trinken von Alkohol in den USA zurückzugeben:</p> + +<pre class="brush: js">function canDrinkAlcohol(age) { + return (age > 21) ? "True, over 21" : "False, under 21"; +} +var output = canDrinkAlcohol(26); +console.log(output); // "True, over 21"</pre> + +<p>Ein guter Weg, um herauszufinden, ob der ternäre Operator ein guter Ersatz für ein <code>if/else</code> Statement ist, ist wenn das <code>return</code> Schlüsselwort mehrfach eingesetzt wird und in jedem Block der einzige Ausdruck ist.</p> + +<p>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 <code>if/else</code> Statements sein. Dadurch wird ein leichter Weg für logisch gleiche Ausdrücke geschaffen:</p> + +<pre class="brush: js">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; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if Statement</a></li> +</ul> |