Javascript 简明教程

JavaScript - Switch Case

JavaScript switch case 是一个条件语句，用于根据表达式的值来执行不同的代码块。计算表达式，如果它与 case 标签之一的值匹配，则执行与该用例关联的代码块。如果没有任何用例标签与表达式的值匹配，则执行与默认标签关联的代码块。

The JavaScript switch case is a conditional statement is used to execute different blocks of code depending on the value of an expression. The expression is evaluated, and if it matches the value of one of the case labels, the code block associated with that case is executed. If none of the case labels match the value of the expression, the code block associated with the default label is executed.

您可以使用多个 if…​else…if 语句（如上一章节中所示）执行多项分支。但这并不总是最佳解决方案，尤其是在所有分支都依赖于单个变量的值时。

You can use multiple if…​else…if statements, as in the previous chapter, to perform a multiway branch. However, this is not always the best solution, especially when all of the branches depend on the value of a single variable.

从 JavaScript 1.2 开始，您可以使用 switch 语句处理这种情况，它的效率高于重复的 if…​else if 语句。

Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation, and it does so more efficiently than repeated if…​else if statements.

Flow Chart

下方的流程图说明了 switch-case 语句的运行方式：

The following flow chart explains a switch-case statement works.

switch case

Syntax

switch 语句的目标是给出一个需要计算的表达式和根据表达式的值执行的多个不同的语句。解释器会将每个 case 与表达式的值进行对比，直到找到匹配值。如果没有匹配值，则会使用 default 条件。

The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.

switch (expression) {
   case condition 1: statement(s)
   break;

   case condition 2: statement(s)
   break;
   ...

   case condition n: statement(s)
   break;

   default: statement(s)
}

  1. break − The statement keyword indicates the end of a particular case. If the 'break' statement were omitted, the interpreter would continue executing each statement in each of the following cases.

  2. default − The default keyword is used to define the default expression. When any case doesn’t match the expression of the switch-case statement, it executes the default code block.

Examples

让我们在一些示例的帮助下详细了解 switch case 语句。

Let’s understand the switch case statement in details with the help of some examples.

Example

在下面的示例中，我们有一个 grade 变量并将其用作 switch case 语句的表达式。switch case 语句用于根据 grade 变量的值执行不同的代码块。

In the example below, we have a grade variable and use it as an expression of the switch case statement. The switch case statement is used to execute the different code blocks according to the value of the grade variable.

对于成绩“A”，它在输出中打印“干得好”并终止 switch case 语句，因为我们使用了 break 语句。

For the grade 'A', it prints the 'Good job' in the output and terminates the switch case statement as we use the break statement.

<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 语句中起主要作用。尝试以下示例，该示例使用 switch-case 语句而不使用任何 break 语句。

Break statements play a major role in switch-case statements. Try the following example that uses switch-case statement without any break statement.

Example: Without break Statement

当我们对 switch case 语句的任何情况都不使用“break”语句时，它会继续执行下一个情况而不终止它。

When we don’t use the 'break' statement with any case of the switch case statement, it continues executing the next case without terminating it.

在下面的代码中，我们没有对情况’A’和’B’使用 break 语句。因此，对于成绩“A”，它将执行情况 A、B 和 C 的语句，然后它将终止 switch case 语句的执行。

In the below code, we haven’t used the break statement with the case 'A' and 'B'. So, for the grade 'A', it will execute the statement of cases A, B, and C, and then it will terminate the execution of the switch case statement.

<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

Example: Common Code Blocks

有时，开发人员需要为表达式的多个值执行公共代码块。它与 if-else 语句中的 OR 条件非常相似。

Sometimes, developers require to execute the common code block for the multiple values of the expression. It is very similar to the OR condition in the if-else statement.

在下面的代码中，我们为情况 A 和 B 以及 C 和 D 执行相同的代码块。你可以尝试更改 grade 变量的值并观察输出。

In the below code, we execute the same code block for cases A and B, and C and D. You may try to change the value of the grade variables and observe the output.

<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

Example: Strict Comparison

switch case 语句使用严格相等运算符将表达式值与 case 值进行比较。

The switch case statement compares the expression value with the case value using the strict equality operator.

“num”变量包含以下代码中的整数值。在 switch case 语句中，所有 case 都在字符串中。因此，代码执行默认语句。

The 'num' variable contains the integer value in the code below. In the switch case statement, all cases are in the string. So, the code executes the default statement.

<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!