path: root/files/zh-tw/web/javascript/reference/statements/switch/index.html

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

<div><span class="seoSummary"><strong><code>switch</code> 語句</strong> 會比對一個 <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">表達式</a> 裡頭的值是否符合 <code>case</code> 條件，然後執行跟這個條件相關的 <a href="/en-US/docs/Web/JavaScript/Reference/Statements">陳述式</a>, 以及此一符合條件以外，剩下其他條件裡的陳述式。</span></div>

<div></div>

<p>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}      </p>



<h2 id="語法">語法</h2>

<pre class="brush: js">switch (expression) {
  case value1:
        //當 expression 的值符合 value1
        //要執行的陳述句
    [break;]
  case value2:
        //當 expression 的值符合 value2
        //要執行的陳述句
    [break;]
  ...
  case valueN:
        //當 expression 的值符合 valueN
        //要執行的陳述句
    [break;]
  [default:
        //當 expression 的值都不符合上述條件
        //要執行的陳述句
    [break;]]
}</pre>

<dl>
 <dt><code>expression</code></dt>
 <dd>一個表達式其結果用來跟每個 <code>case</code> 條件比對。</dd>
 <dt><code>case valueN</code> {{optional_inline}}</dt>
 <dd>一個 <code>case</code> 條件是用來跟 <code>expression</code> 匹配的。 如果 <code>expression</code> 符合特定的 <code>valueN</code>，那在case條件裡的語句就會執行，直到這個 <code>switch</code> 陳述式結束或遇到一個 <code>break</code> 。</dd>
 <dt><code>default</code> {{optional_inline}}</dt>
 <dd>一個 <code>default</code> 條件；倘若有這個條件，那在 <code>expression</code> 的值並不符合任何一個 <code>case</code> 條件的情況下，就會執行這個條件裡的語句。</dd>
</dl>

<h2 id="描述">描述</h2>

<p>一個 switch 陳述式會先評估自己的 expression。然後他會按照 <code>case</code> 條件順序開始尋找，直到比對到第一個表達式值跟輸入 expression 的值相等的 case 條件（使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">嚴格的邏輯運算子</a>, <code>===</code>）並把控制流交給該子句、並執行裡面的陳述式（如果給定值符合多個 case，就執行第一個符合的 case，就算該 case 與其他 case 不同）</p>

<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. 按照慣例， <code>default</code> 語句會是最後一個條件，但不一定要存在。</p>

<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p>

<h2 id="範例">範例</h2>

<h3 id="使用_switch">使用 <code>switch</code></h3>

<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</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="如果我忘記_break_會發生什麼事？">如果我忘記 break 會發生什麼事？</h3>

<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p>

<pre class="brush: js">var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0: // foo is 0 so criteria met here so this block will run
    console.log(0);
    // NOTE: the forgotten break would have been here
  case 1: // no break statement in 'case 0:' so this case will run as well
    console.log(1);
    break; // it encounters this break so will not continue into 'case 2:'
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}</pre>

<h3 id="我可以在_cases_中間放_default_嗎？">我可以在 cases 中間放 default 嗎？</h3>

<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p>

<pre class="brush: js">var foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break; // it encounters this break so will not continue into 'default:'
  default:
    console.log('default')
    // fall-through
  case 1:
    console.log('1');
}
</pre>

<p>It also works when you put default before all other cases.</p>

<h3 id="同時使用多個條件_case_的方法">同時使用多個條件 case 的方法</h3>

<p>Source for this technique is here:</p>

<p><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="Multi-case_-_single_operation">Multi-case - single operation</h4>

<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p>

<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</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="Multi-case_-_chained_operations">Multi-case - chained operations</h4>

<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p>

<pre class="brush: js">var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 0:
    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 5!');
}</pre>

<p>The output from this example:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Value</th>
   <th scope="col">Log text</th>
  </tr>
  <tr>
   <td>foo is NaN or not 1, 2, 3, 4, 5 or 0</td>
   <td>Please pick a number from 0 to 5!</td>
  </tr>
  <tr>
   <td>0</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>
 </tbody>
</table>

<h3 id="Block-scope_variables_within_switch_statements">Block-scope variables within <code>switch</code> statements</h3>

<p>With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> statements to declare block-scoped variables.</p>

<p>Take a look at this example:</p>

<pre class="brush: js">const action = 'say_hello';
switch (action) {
  case 'say_hello':
    let message = 'hello';
    console.log(message);
    break;
  case 'say_hi':
    let message = 'hi';
    console.log(message);
    break;
  default:
    console.log('Empty action received.');
    break;
}</pre>

<p>This example will output the error <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> which you were not probably expecting.</p>

<p>This is because the first <code>let message = 'hello';</code> conflicts with second let statement <code>let message = 'hi';</code> even they're within their own separate case statements <code>case 'say_hello':</code> and <code>case 'say_hi':</code>; ultimately this is due to both <code>let</code> statements being interpreted as duplicate declarations of the same variable name within the same block scope.</p>

<p>We can easily fix this by wrapping our case statements with brackets:</p>

<pre class="brush: js">const action = 'say_hello';
switch (action) {
  case 'say_hello': <strong>{ // added brackets</strong>
    let message = 'hello';
    console.log(message);
    break;
  <strong>} // added brackets</strong>
  case 'say_hi': <strong>{ // added brackets</strong>
    let message = 'hi';
    console.log(message);
    break;
  <strong>} // added brackets</strong>
  default: <strong>{ // added brackets</strong>
    console.log('Empty action received.');
    break;
  <strong>} // added brackets</strong>
}</pre>

<p>This code will now output <code>hello</code> in the console as it should, without any errors at all.</p>

<h2 id="技術規範">技術規範</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Initial definition. Implemented 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="瀏覽器相容性">瀏覽器相容性</h2>



<p>{{Compat("javascript.statements.switch")}}</p>

<h2 id="你也可以看看">你也可以看看</h2>

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