JavaScript/TypeScript中(值1||值2)分组比较的合法性及相关技术问询

1. 写法的合法性与逻辑问题 #

你的示例代码语法上完全合法，可以在现代浏览器/TS环境中运行，但它的逻辑和你预期的完全不一样：

• ||是逻辑或运算符，它的核心行为是返回第一个“真值”。'a'本身是字符串真值，所以'a' || 'b'会直接返回'a'，不会考虑'b'。
• 因此你的条件等价于exampleVar === 'a'，只有当exampleVar为'a'时才会输出Yay!，为'b'时会进入else分支，和你的预期不符。

2. 为什么这种分组比较没成为合法语法糖 #

JavaScript没有引入x === (a||b)这种“判断x等于a或b”的语法糖，原因很直接：

• 现有语法已经能简洁实现需求（见下文正确写法），没必要增加语言复杂度。
• 强行赋予||在比较中的分组语义，会和它原本“取第一个真值”的核心功能冲突，造成语义混淆。

3. 正确的快捷比较方式 #

如果你想判断变量是否属于一组值，有两种常用的简洁写法：

方式一：直接使用逻辑或拆分条件 #

这是最基础的写法，兼容性无任何问题：

const exampleVar: 'a' | 'b' | 'c' | 'd' = 'a';
if (exampleVar === 'a' || exampleVar === 'b') {
  console.log('Yay!');
}

方式二：使用数组includes方法 #

这是ES2016（ES7）新增的特性，代码更简洁，适合值较多的场景：

const exampleVar: 'a' | 'b' | 'c' | 'd' = 'a';
if (['a', 'b'].includes(exampleVar)) {
  console.log('Yay!');
}

4. (值1||值2)的安全使用场景 #

||的正确使用场景是取默认值，当左侧值为假值（undefined、null、''、0、false等）时，返回右侧的默认值：

// 当inputUserName未定义时，使用默认值'Guest'
const userName = inputUserName || 'Guest';

5. 兼容性说明 #

• ||运算符从JavaScript最初版本就存在，所有环境都支持。
• Array.prototype.includes支持所有现代浏览器（Chrome 47+、Firefox 43+、Edge 14+），无需额外兼容处理。

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