JavaScript switch 语句

Begindev 编辑部 March 25, 2026

switch 语句是 JavaScript 中一个强大的控制流工具，它提供了一种结构化的方式，基于单个表达式的值来处理多个条件分支。

虽然 if...else if...else 语句也能达到类似的效果，但在处理大量可能的值时，switch 语句通常能提供更易读、更易维护的解决方案。它允许你根据表达式的值与哪个 case（情况）匹配，来执行不同的代码块。

1. 理解 `switch` 语句的语法

switch 语句以 switch 关键字开始，后面跟着括号内的表达式（expression）。这个表达式会被计算一次，然后将结果与 switch 代码块中每个 case 的值进行比较。

switch (expression) {
  case value1:
    // 如果 expression === value1，执行这里的代码
    break;
  case value2:
    // 如果 expression === value2，执行这里的代码
    break;
  // ... 更多 case
  default:
    // 如果没有 case 匹配 expression，执行这里的代码
}

switch (expression): switch 关键字启动语句，并计算 expression（表达式）。计算结果随后会与每个 case 的值进行比较。
case value1:: 每个 case 代表一个要与表达式进行比较的具体值。如果 expression 严格等于 (===) value1，紧随其后的代码将会被执行。
break;: break 语句至关重要。它会终止 switch 语句，防止代码“贯穿”（fall through）到下一个 case。如果没有 break，程序会继续执行下一个 case 的代码，而不管它的值是否匹配。
default:: default（默认）情况是可选的。它指定了当没有 case 值与表达式匹配时要执行的代码。包含一个 default 来处理意外或无效的值是一个好习惯。

2. `break` 语句的重要性

break 语句是将 switch 语句与简单的 if 语句序列区分开来的关键。如果没有 break，代码执行将“贯穿”到下一个 case，即使那个 case 的值并不匹配。这可能会导致意外的行为和 Bug。

2.1 示例：没有 `break` (错误示范)

let day = 3;
let dayName = "";

switch (day) {
  case 1:
    dayName = "星期一";
  case 2:
    dayName = "星期二";
  case 3:
    dayName = "星期三";
  case 4:
    dayName = "星期四";
  case 5:
    dayName = "星期五";
  case 6:
    dayName = "星期六";
  case 7:
    dayName = "星期日";
  default:
    dayName = "无效日期";
}

console.log(dayName); // 输出: 无效日期

在这个例子中，因为没有 break 语句，代码从 case 3 开始执行，然后一路向下执行了所有后续的 case，最终执行了 default 情况，将 dayName 赋值为 "无效日期"。

2.2 示例：使用 `break` (正确做法)

let day = 3;
let dayName = "";

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三";
    break;
  case 4:
    dayName = "星期四";
    break;
  case 5:
    dayName = "星期五";
    break;
  case 6:
    dayName = "星期六";
    break;
  case 7:
    dayName = "星期日";
    break;
  default:
    dayName = "无效日期";
}

console.log(dayName); // 输出: 星期三

有了 break 语句，代码只执行与 day 值匹配的那个 case，得到了正确的 dayName。

3. `default` 情况

default 情况提供了一个“后备选项”，当没有任何 case 值匹配表达式时使用。它通常放在 switch 代码块的末尾，尽管技术上它可以放在任何位置。不过，如果它不在末尾，你仍然需要一个 break 语句来防止代码贯穿。

3.1 示例：使用 `default`

let grade = "Z";
let feedback = "";

switch (grade) {
  case "A":
    feedback = "优秀！";
    break;
  case "B":
    feedback = "做得好！";
    break;
  case "C":
    feedback = "继续努力！";
    break;
  case "D":
    feedback = "需要改进。";
    break;
  case "F":
    feedback = "不及格。";
    break;
  default:
    feedback = "无效等级。";
}

console.log(feedback); // 输出: 无效等级。

在这个例子中，因为 grade 是 "Z"，不匹配任何 case，所以执行了 default 分支。

3. 在 `switch` 中使用不同数据类型

switch 语句可以用于各种数据类型，包括数字、字符串和布尔值。但是，必须记住：表达式与 case 值之间的比较是严格相等 (===) 比较。这意味着数据类型必须完全匹配。

3.1 字符串示例：

let fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("我是香蕉。");
    break;
  case "apple":
    console.log("我是苹果。");
    break;
  case "orange":
    console.log("我是橘子。");
    break;
  default:
    console.log("我不认识这种水果。");
} // 输出: 我是苹果。

3.2 数字示例：

let age = 25;

switch (age) {
  case 18:
    console.log("你 18 岁了。");
    break;
  case 21:
    console.log("你 21 岁了。");
    break;
  case 25:
    console.log("你 25 岁了。");
    break;
  default:
    console.log("你是其他年龄。");
} // 输出: 你 25 岁了。

4. 合并 Case (分组)

有时，你可能希望对多个 case 值执行同一段代码。在这种情况下，你可以将这些 case 分组在一起，省略 break 语句，直到该组的最后一个 case。

4.1 分组 Case 示例：

let day = 6;
let dayType = "";

switch (day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    dayType = "工作日";
    break;
  case 6:
  case 7:
    dayType = "周末";
    break;
  default:
    dayType = "无效日期";
}

console.log(dayType); // 输出: 周末

在这个例子中，如果 day 是 1, 2, 3, 4, 或 5，代码会一直“贯穿”直到遇到 dayType = "工作日"; 这一行，然后被 break 终止。同样，如果 day 是 6 或 7，dayType 会被设为 "周末"。

5. `switch` vs. `if...else if...else`

switch 语句和 if...else if...else 语句都可以用来处理多重条件分支。但它们有一些关键区别：

可读性：当处理单个表达式的大量离散值时，switch 语句通常更易读。if...else if...else 在这种情况下会显得冗长且难以跟踪。
表达式复杂性： switch 最适合将单个表达式与多个常量值进行比较。if...else if...else 更灵活，可以处理更复杂的条件，包括数值范围和逻辑组合。
严格相等： switch 语句使用严格相等 (===) 进行比较。if 语句可以使用任何比较运算符。
贯穿 (Fall-Through)： switch 语句的贯穿行为（在没有 break 时）既是优点也是缺点。它允许对 case 进行分组，但如果不小心使用也可能导致 Bug。

5.1 使用 `if...else if...else` 的示例 (处理范围)：

let temperature = 25;

if (temperature < 0) {
  console.log("结冰");
} else if (temperature < 10) {
  console.log("很冷");
} else if (temperature < 20) {
  console.log("冷");
} else if (temperature < 30) {
  console.log("适中");
} else {
  console.log("热");
} // 输出: 适中

这个例子展示了 if...else 如何处理数值范围，这是 switch 语句无法直接做到的。

6. 实战练习：构建一个简单的计算器

让我们构建一个简单的计算器，根据用户输入执行基本的算术运算。

let num1 = 10;
let num2 = 5;
let operator = "+"; // 可能的值: "+", "-", "*", "/"
let result;

switch (operator) {
  case "+":
    result = num1 + num2;
    break;
  case "-":
    result = num1 - num2;
    break;
  case "*":
    result = num1 * num2;
    break;
  case "/":
    if (num2 === 0) {
      result = "除以零错误！";
    } else {
      result = num1 / num2;
    }
    break;
  default:
    result = "无效的运算符";
}

console.log(`${num1} ${operator} ${num2} = ${result}`); // 输出: 10 + 5 = 15

1. 理解 switch 语句的语法

2. break 语句的重要性

2.1 示例：没有 break (错误示范)

2.2 示例：使用 break (正确做法)

3. default 情况

3.1 示例：使用 default

3. 在 switch 中使用不同数据类型