JavaScript - switch case 語句

JavaScript 的switch case語句是一種條件語句，用於根據表示式的值執行不同的程式碼塊。表示式被計算，如果它與其中一個case標籤的值匹配，則執行與該case關聯的程式碼塊。如果沒有任何case標籤與表示式的值匹配，則執行與default標籤關聯的程式碼塊。

您可以像上一章那樣使用多個if...else…if語句來執行多路分支。但是，這並不總是最佳解決方案，特別是當所有分支都依賴於單個變數的值時。

從 JavaScript 1.2 開始，您可以使用switch語句來精確處理這種情況，並且它的效率比重複使用if...else if語句更高。

流程圖

下圖解釋了 switch-case 語句的工作原理。

語法

switch語句的目的是提供一個要計算的表示式以及幾個基於表示式值要執行的不同語句。直譯器會將每個case與表示式的值進行比較，直到找到匹配項。如果沒有匹配項，則使用default條件。

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

break − 該語句關鍵字指示特定 case 的結束。如果省略了 'break' 語句，直譯器將繼續執行每個後續 case 中的每個語句。
default − default 關鍵字用於定義預設表示式。當任何 case 與 switch-case 語句的表示式不匹配時，它將執行 default 程式碼塊。

示例

讓我們透過一些示例詳細瞭解 switch case 語句。

示例

在下面的示例中，我們有一個 grade 變數，並將其用作 switch case 語句的表示式。switch case 語句用於根據 grade 變數的值執行不同的程式碼塊。

對於成績 'A'，它在輸出中列印 'Good job' 並終止 switch case 語句，因為我們使用了 break 語句。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
	  let grade = 'A';
      output.innerHTML += "Entering switch block <br />";
      switch (grade) {
         case 'A': output.innerHTML += "Good job <br />";
            break;
         case 'B': output.innerHTML += "Passed <br />";
            break;
         case 'C': output.innerHTML += "Failed <br />";
            break;
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

輸出

Entering switch block
Good job
Exiting switch block

break 語句在 switch-case 語句中起著重要作用。嘗試以下不使用 break 語句的 switch-case 語句示例。

示例：無 break 語句

當我們不為 switch case 語句的任何 case 使用 'break' 語句時，它將繼續執行下一個 case 而不終止它。

在下面的程式碼中，我們沒有為 case 'A' 和 'B' 使用 break 語句。因此，對於成績 'A'，它將執行 case A、B 和 C 的語句，然後終止 switch case 語句的執行。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let grade = 'A';
      output.innerHTML += "Entering switch block<br />";
      switch (grade) {
         case 'A': output.innerHTML += "Good job <br />";
         case 'B': output.innerHTML += "Passed <br />";
         case 'C': output.innerHTML += "Failed <br />";
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

輸出

Entering switch block
Good job
Passed
Failed
Unknown grade
Exiting switch block

示例：公共程式碼塊

有時，開發人員需要為表示式的多個值執行公共程式碼塊。這與 if-else 語句中的 OR 條件非常相似。

在下述程式碼中，我們對案例A和B，以及C和D執行相同的程式碼塊。您可以嘗試更改grade變數的值並觀察輸出。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      var grade = 'C';
      output.innerHTML += "Entering switch block <br />";
      switch (grade) {
         case 'A':
         case 'B': output.innerHTML += "Passed <br />";
            break;
         case 'C':
         case 'D': output.innerHTML += "Failed! <br />";
            break;
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

輸出

Entering switch block
Failed!
Exiting switch block

示例：嚴格比較

switch case語句使用嚴格相等運算子比較表示式值與case值。

下面的程式碼中，“num”變數包含整數值。在switch case語句中，所有case都是字串。因此，程式碼執行default語句。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let num = 10;
      switch (num) {
         case '10': output.innerHTML += "10 Marks!";
            break;
         case '11': output.innerHTML += "11 Marks!";
            break;
         default: output.innerHTML += "Input is not a string!";
      }
   </script>
</body>
</html>

輸出

Input is not a string!

列印頁面