switchを評価し、その式の値が case のラベルと一致するなら、その case に関連付けられたを実行します。

構文

switch (expression) {
  case value1:
    // 式の結果が value1 にマッチする場合に実行する文
    [break;]
  case value2:
    // 式の結果が value2 にマッチする場合に実行する文
    [break;]
  ...
  case valueN:
    // 式の結果が valueN にマッチする場合に実行する文
    [break;]
  default:
    // 式の値にマッチするものが存在しない場合に実行する文
    [break;]
}
expression
結果が各 case 節と一致するか調べる式。
case valueN Optional
expression との照合に使用される case 節。expression が指定された valueN と一致する場合、case 文の中の処理は、switch 文の終了または break のいずれかになるまで実行されます。
default Optional
default 節。expression の値が case 節のいずれとも一致しない場合、この節が実行されます。

説明

switch 文はまず始めに式を評価します。次に (厳密等価演算子 === を使用して) 式が入力式の結果と評価される値が等しい最初の case 節を探し、その節に制御を移して、関連する処理を実行します。(複数の case 節の値が指定された値と一致する場合、case 節が互いに等しくなくても、最初に一致する case 節が選択されます。)

一致する case 節が見つからない場合、プログラムは省略可能な default 節を探し、見つかればその節に制御を移し、関連する文を実行します。default 節が見つからない場合、プログラムは switch の終了に続く文で実行を続けます。慣習では、default 節は最後の節ですが、そうである必要はありません。

各ケースのラベルに関連付けられた省略可能な break 文は、一度一致した文が実行されたら、プログラムが switch から抜け出し、switch に続く文から実行を継続することを保証します。もし break が省略されたなら、プログラムは switch 文の中の次の文から実行を継続します。

switch を使う

次の例では、もし expr が "Bananas" に評価されるなら、プログラムは case "Bananas" で値に一致し、関連付けられた文を実行します。break と遭遇したときは、プログラムは switch から抜け出し、switch に続く文を実行します。もし break が省略されたなら、case "Cherries" に対する文も実行されます。

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?");

break を置かないとどうなるか?

break を置かなければ、スクリプトは基準を満たす case から実行され、その後の case も基準を満たすかに関係なく実行されます。こちらの例をご覧ください:

var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0: // foo は 0 であり、基準を満たすためでこのブロックを実行する
    console.log(0);
    // 注記: ここに break を置くのを忘れている
  case 1: // 'case 0:' に break 文がないため、この case も実行される
    console.log(1);
    break; // この break に当たるため、'case 2:' には続かない
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}

ケース間にデフォルトを置くことはできますか?

はい、できます! 一致するものが見つからない場合、JavaScript はデフォルトに戻ります:

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');
}

他のすべてのケースの前にデフォルトを設定した場合にも機能します。

複数基準の case の使用法

この技法の出典はこちらです:

Switch statement multiple cases in JavaScript (Stack Overflow)

複数の case とひとつの操作

この方法は、case 文の配下に break がない場合に、次の case も基準を満たすかに関係なく実行されるという事実を活用します。"break を置かないとどうなるか?" の章をご覧ください。

これは連続した switch 文とひとつの操作の例であり、4 つの異なる値でまったく同じ操作を行います。

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.');
}

複数の case とひと続きの操作

これは連続した switch 文と複数の操作の例であり、与えられた整数に応じてさまざまな出力を受けます。case 文を置いた順に操作が続いて行くことを示しており、case 文は数値順に並べる必要はありません。JavaScript では、これらの case 文の中に文字列の定義を混入することができます。

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!');
}

このサンプルの出力は以下のとおりです:

記録するテキスト
foo が NaN である、あるいは 1, 2, 3, 4, 5, 10 のいずれでもない Please pick a number from 0 to 6!
10 Output: So What Is Your Name?
1 Output: What Is Your Name?
2 Output: Your Name?
3 Output: Name?
4 Output: ?
5 Output: !

仕様

仕様書 策定状況 コメント
ECMAScript 3rd Edition (ECMA-262) 標準 最初期の定義。JavaScript 1.2 で実装。
ECMAScript 5.1 (ECMA-262)
switch statement の定義
標準  
ECMAScript 2015 (6th Edition, ECMA-262)
switch statement の定義
標準  
ECMAScript Latest Draft (ECMA-262)
switch statement の定義
ドラフト  

ブラウザの実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 ありnodejs 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, lv7777, yyss, vikohone, teoli, ethertank, Mgjbot, Nanto vi
最終更新者: silverskyvicto,