JavaScript中switch(true)与if(true)执行结果不同的原因问询

问题描述 #

我正在编写按钮点击事件的处理函数，因为按钮类型较多，想用switch(true)替代冗长的if...else if语句。其中部分数字按钮的数字存储在<button>标签的value属性中，但测试时发现以下两段代码执行结果不一致，多次测试仍没头绪，推测是switch与if的处理机制存在技术差异，求解释：

Switch代码：

switch(true) { 
  case (Number(button.value)): 
    console.log('thats a number'); 
    break; 
  default: 
    console.log('NaN'); 
    break; 
}

If代码：

if(Number(button.value)) { 
  console.log('thats a number'); 
} else { 
  console.log('NaN'); 
}

解答 #

核心差异在于**if的真值判断 vs switch的严格全等判断**，这两种逻辑完全不是一回事：

1. if语句的判断逻辑

if(Number(button.value))做的是真值转换判断：它会把Number(button.value)的结果自动转换成布尔值，只要这个值不是假值（false、0、""、null、undefined、NaN），就会进入if分支。

举个例子：

• 当button.value是"5"时，Number("5")得到5（真值），所以输出thats a number；
• 当button.value是"0"时，Number("0")得到0（假值），所以走else输出NaN（这里其实有个小问题：0是合法数字，但被if当成了非数字处理，后面会说怎么修正）；
• 当button.value是"abc"时，Number("abc")得到NaN（假值），输出NaN。

2. switch(true)的判断逻辑

switch(true)的匹配规则是：将switch后的表达式（这里是true）和每个case后的表达式做严格全等比较（===）——也就是说，只有当true === Number(button.value)成立时，才会执行对应的case代码。

但这里有个关键：Number(button.value)的结果是数字类型，而true是布尔类型，严格全等要求值和类型都完全一致。数字和布尔值永远不可能全等，所以你的case分支永远不会被触发，所有情况都会走default输出NaN！

比如：

• true === 5？false（类型不同）；
• true === 0？false（类型不同）；
• true === NaN？false（NaN和任何值都不等）；

这就是两段代码结果不同的根本原因——你误以为switch(true)的case是判断表达式是否为真，但实际上它是在做严格全等匹配。

3. 修正switch(true)以匹配if的逻辑

如果想让switch(true)实现和原if一样的逻辑，你需要把case写成布尔值判断表达式，比如：

switch(true) { 
  // 模拟if的真值判断：把Number结果转成布尔值
  case !!Number(button.value): 
    console.log('thats a number'); 
    break; 
  default: 
    console.log('NaN'); 
    break; 
}

另外，原if语句其实有个bug：它会把0当成非数字处理。如果想准确判断button.value是否为有效数字（包括0），应该用!isNaN()来判断，修正后的代码如下：

修正后的if代码：

const num = Number(button.value);
if(!isNaN(num)) { 
  console.log('thats a number'); 
} else { 
  console.log('NaN'); 
}

对应的switch代码：

const num = Number(button.value);
switch(true) { 
  case !isNaN(num): 
    console.log('thats a number'); 
    break; 
  default: 
    console.log('NaN'); 
    break; 
}

内容的提问来源于stack exchange，提问作者sethW