path: root/files/de/web/javascript/reference/statements/switch/index.html

---
title: switch
slug: Web/JavaScript/Reference/Statements/switch
tags:
  - JavaScript
  - Reference
  - Statement
translation_of: Web/JavaScript/Reference/Statements/switch
---
<div>{{jsSidebar("Statements")}}</div>

<p>Die <strong>switch Anweisung</strong> wertet einen <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators">Ausdruck</a> aus. Diese Auswertung wird mit einer case Klausel verglichen und (bei Übereinstimmung) die entsprechenden <a href="/de/docs/Web/JavaScript/Reference/Statements">Anweisungen</a> ausgeführt.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">switch (expression) {
  case value1:
    // Anweisungen werden ausgeführt,
    // falls <em>expression</em> mit value1 übereinstimmt
    [break;]
  case value2:
    // Anweisungen werden ausgeführt,
    // falls <em>expression</em> mit value2 übereinstimmt
    [break;]
  ...
  case valueN:
    // Anweisungen werden ausgeführt,
    // falls <em>expression</em> mit valueN übereinstimmt
    [break;]
  default:
    // Anweisungen werden ausgeführt,
    // falls keine der case-Klauseln mit <em>expression</em> übereinstimmt
    [break;]
}</pre>

<dl>
 <dt><code>expression</code></dt>
 <dd>Ausdruck, der mit jeder case Klausel verglichen wird.</dd>
 <dt><code>case valueN</code></dt>
 <dd>Der Wert einer case Klausel wird mit <code>expression</code> verglichen.</dd>
</dl>

<h2 id="Beschreibung">Beschreibung</h2>

<p>Ein switch Statement wertet als erstes den Ausdruck aus. Danach wird nach der ersten <code>case</code> Klausel gesucht, die zu dem gleichen Wert ausgewertet wird wie der erste Ausdruck im <code>switch</code> (mit <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identität_strikte_Gleichheit_()">striktem Vergleich</a>, <code>===</code> ) und springt im Kontrollfluss zu der Klausel und führt die dort geschriebenen Statements aus. (Bei mehrfachen Übereinstimmungen springt das Programm zu der ersten gefundenen Klausel, auch wenn die gefunden Klausen nicht gleich sind.) Falls keine übereinstimmende <code>case</code> Klausel gefunden wird, sucht das Programm die optionale <code>default</code> Klausel und führt, wenn diese Klausel existiert, die Anweisungen in der Klausel aus. Wenn keine <code>default</code> Klausel vorhanden ist, wird das Programm nach dem switch Statement fortgesetzt. Konventionell ist die <code>default</code> Klausel die letzte Klausel, das muss aber nicht so sein.</p>

<p>Die optionale <a href="/de/docs/Web/JavaScript/Reference/Statements/break" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="JavaScript/Reference/Statements/break">break</a> Anweisung in jedem <code>case</code> Block weist das Programm an die switch Anweisung zu beenden. Das Programm macht dann mit der Anweisung weiter, die dem Ende der switch Anweisung folgt. Wird die <code>break</code> Anweisung weggelassen, dann macht das Programm linear weiter; es wird die nächste Anweisung ausgeführt.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Verwendung_von_switch">Verwendung von <code>switch</code></h3>

<p>Betrachten wir das folgende Beispiel. Falls <code>expr</code> zu "Bananas" ausgewertet wird, dann springt das Programm zu der case Klausel "Bananas" und führt die entsprechenden Anweisungen aus. Die <code>break</code> Anweisung füht dazu, dass das Programm die switch Anweisung verlässt und mit der ersten Anweisung weitermacht, die dem Ende der switch Anweisung folgt.<br>
 Hätte man <code>break</code> weggelassen, dann hätte das Programm die Anweisungen der case Klausel "Cherries" ausgeführt.</p>

<pre class="brush: js">switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");
</pre>

<h3 id="Was_passiert_falls_man_eine_break_Anweisung_weglässt">Was passiert, falls man eine <code>break</code> Anweisung weglässt?</h3>

<p>Falls man eine break Anweisung vergisst, dann führt das Programm sowohl die übereinstimmende case Klausel als auch die darauf folgende case Klausel aus, unabhängig des Wertes der case Klausel.</p>

<p>Im Allgemeinen fährt das Programm linear fort bis es auf eine <code>break</code> Anweisung stößt. Falls keine <code>break</code> Anweisung vorhanden ist, dann werden alle Anweisungen bis zum Ende der <code>switch</code> Anweisung ausgeführt.</p>

<pre class="brush: js">var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0: // foo ist 0 - diese case-Klausel wird ausgeführt
    console.log(0)
    // HINWEIS: <code>break</code> Anweisung wurde hier weggelassen
  case 1: // Da keine break Anweisung in 'case 0:'
          // wird diese Klausel ebenfalls ausgeführt,
          // obwohl der Wert nicht mit dem Ausdruck von
          // switch übereinstimmt
    console.log(1);
    break; // das Programm verlässt die switch Anweisung.
           // 'case 2:' wird nicht ausgeführt
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}</pre>

<h3 id="Techniken_für_case_Klauseln_mit_mehr_als_einem_Kriterium">Techniken für case Klauseln mit mehr als einem Kriterium</h3>

<p>Die Quelle der erwähnten Methode kann hier aufgerufen werden (auf Englisch):<br>
 <a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>

<h4 id="Mehrere_case_Klauseln_mit_einer_einfachen_Anweisung">Mehrere case Klauseln mit einer einfachen Anweisung</h4>

<p>Diese Technik macht es sich zum Vorteil, dass das Programm einfach bei der nächsten case Klausel weitermacht, wenn man die <code>break</code> Anweisung weglässt. Siehe Abschnitt "Was passiert, falls ich eine <code>break</code> Anweisung weglasse?"</p>

<p>Dieses Beispiel zeigt eine einfache Operation, die für alle entsprechenden case Klauseln ausgeführt wird ('Cow', 'Giraffe', 'Dog', 'Pig').</p>

<pre class="brush: js">var Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Pig':
    console.log('This animal will go on Noah\'s Ark.');
    break;
  case 'Dinosaur':
  default:
    console.log('This animal will not.');
}</pre>

<h4 id="Mehrere_case_Klauseln_mit_mehreren_Anweisungen">Mehrere case Klauseln mit mehreren Anweisungen</h4>

<p>Dieses Beispiel zeigt wie mehrere Anweisungen verschiedener case Klauseln ausgeführt werden.<br>
 Die case Klauseln werden in geschriebener Reihenfolge ausgeführt, also unabhängig jeglicher Ordnung der Ausdrücke der case Klauseln.</p>

<pre class="brush: js">var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 10:
    output += 'So ';
  case 1:
    output += 'What ';
    output += 'Is ';
  case 2:
    output += 'Your ';
  case 3:
    output += 'Name';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 6!');
}</pre>

<p>Mögliche Ergebnisse:</p>

<table class="standard-table" style="height: 270px; width: 522px;">
 <tbody>
  <tr>
   <th scope="col">Wert</th>
   <th scope="col">Ausgabe</th>
  </tr>
  <tr>
   <td>10</td>
   <td>Output: So What Is Your Name?</td>
  </tr>
  <tr>
   <td>1</td>
   <td>Output: What Is Your Name?</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Output: Your Name?</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Output: Name?</td>
  </tr>
  <tr>
   <td>4</td>
   <td>Output: ?</td>
  </tr>
  <tr>
   <td>5</td>
   <td>Output: !</td>
  </tr>
  <tr>
   <td><em>Alle anderen Werte</em></td>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Please pick a number from 0 to 6!</span></td>
  </tr>
 </tbody>
</table>

<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('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Initiale Definition.<br>
    Implementiert in JavaScript 1.2</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Unterstützt</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Unterstützt</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
</ul>