path: root/files/de/web/javascript/reference/operators/conditional_operator/index.html

---
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 &gt;= 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 &gt; 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 &gt; 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 &gt; 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 &gt; 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 &gt; 18 ist.
) : (
    alert("You are much too young!"),
    alert("Sorry :-("),
    // etc. etc.
    "stop.html" // dieser Wert wird zugewiesen wenn "age" &lt;= 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 &gt; 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>