JavaScript运算符类型转换、宽松相等与空值合并陷阱排查及代码实践

脚本专家

在JavaScript中，运算符是最基础的语法层，但线上问题往往不是不会写+或===，而是没看清隐式转换、返回值语义和短路求值。原文按ECMAScript抽象操作拆解了类型转换、算术、赋值、比较、逻辑和位运算。下面按“转换地基—运算符行为—相等性—默认值—排查清单”重组为可落地的代码实践。

一、四个转换入口决定运算符结果

规范里的ToPrimitive、ToNumber、ToBoolean、ToInt32/ToNumeric不是可调用函数，而是描述转换行为的抽象操作。对象转原始值时，先看Symbol.toPrimitive；没有则按hint尝试valueOf和toString，hint为string时顺序对调。第一个返回原始值的方法就是结果，两个都不返回原始值则抛TypeError。

2. const obj = {
3.   valueOf() { return 42; },
4.   toString() { return 'str'; }
5. };
6. obj + 1; // 43，+ 用 default hint，优先 valueOf
7. `${obj}`; // 'str'，模板字符串用 string hint
8. Number(obj); // 42
9. String(obj); // 'str'

复制代码

Date是特例：default hint下返回字符串，所以new Date(0) + 1是字符串拼接；Number(new Date(0))才是时间戳。数组的valueOf返回自身，最终落到toString，也就是join(',')，因此[] + []得空串，[1,2] + [3,4]得'1,23,4'。ToNumber方面，undefined为NaN，null为0，布尔为1/0，空串为0，非法数字字符串为NaN，Symbol抛TypeError。对象先ToPrimitive再递归ToNumber，所以+[]为0，+['5']为5，+[1,2]为NaN，+{}为NaN。

ToBoolean只需记住八个falsy：false、0、-0、0n、''、null、undefined、NaN。其余都是truthy。空数组、空对象、字符串'0'、字符串'false'、空格字符串都是true；new Boolean(false)也是true，因为它是对象。要转换就用Boolean(x)，不要用new包装。位运算走ToInt32，null、undefined、NaN变0，小数向零截断；BigInt走ToBigInt，1n + 1会抛TypeError，不能和Number直接混算。

二、算术运算符的工程坑

+是唯一具有双重语义的二元运算符：先对左右操作数各做一次ToPrimitive，再判断原始类型；只要一方是字符串就拼接，否则双方ToNumber后相加。判断发生在转换之后，所以1 + true得2，1 + null得1，1 + undefined得NaN，'' + 0得'0'。{} + []在浏览器控制台语句位置会被解析为空代码块加+[]，结果是0；写成({} + [])或放在赋值右侧，结果才是'[object Object]'。差异来自语法解析位置，不是运算符本身。

2. +'42'; // 42
3. +''; // 0
4. +'12px'; // NaN
5. Number('12px'); // NaN
6. parseInt('12px', 10); // 12

复制代码

一元+等价于ToNumber，适合把DOM输入值转数字，但意图不如Number(x)显眼。Number和parseInt不等价：Number要求整个字符串合法，parseInt从左向右解析到第一个非法字符，自由文本用parseInt并传基数10，严格校验用Number或正则。减法、乘法、除法没有歧义，字符串会被强制转数字，'10' - 5得5，'a' - 1得NaN。浮点精度问题来自IEEE 754双精度：0.1 + 0.2得0.30000000000000004，0.1 + 0.2 === 0.3为false。金额可用整数分单位、字符串保存小数或decimal.js；普通比较用Math.abs(a - b) <= Number.EPSILON * Math.max(Math.abs(a), Math.abs(b))，简单场景也可用小于1e-9。除零合法：1/0为Infinity，0/0为NaN。

取余结果符号跟随左操作数：7 % 3为1，-7 % 3为-1。需要非负模时用((a % b) + b) % b修正。判断奇数不要写n % 2 === 1，因为-3 % 2得-1，稳妥写法是n % 2 !== 0。**是右结合，2 ** 3 ** 2等于512；一元运算符不能直接贴在底数前，-2 ** 2是SyntaxError，必须写-(2 ** 2)或(-2) ** 2。++和--的前置后置区别是返回新值还是旧值；它们内部先ToNumber，所以let s='5'; s++后s是数字6，而s = s + 1会得到'51'。同一表达式里对同一变量多次读写，如arr[i++] = i++，可读性差且迁移易错，应避免。

三、比较与相等：从推导到选型

关系运算符先做ToPrimitive：双方都是字符串时按Unicode码元逐字符比较，否则双方ToNumeric后按数值比较。'a' < 'b'为true，'Z' < 'a'为true，'10' < '9'为true，因为双方都是字符串，'1'的码元小于'9'；'10' < 9为false，因为右侧是数字。null和undefined参与大小比较要特别小心：null >= 0为true，null > 0为false，null <= 0为true；undefined >= 0、undefined > 0、undefined < 0全为false，因为undefined转NaN。null >= 0可理解为!(null < 0)，null < 0走ToNumber得0 < 0为false，取反为true；null > 0直接算0 > 0为false。

==由抽象相等算法定义。类型相同按===；null和undefined互相相等且不与别的值相等；数字对字符串时字符串ToNumber；有布尔参与时布尔先ToNumber；对象对原始值时对象先ToPrimitive；其余组合一律false。所以null == undefined为true，null == 0为false，'' == 0为true，'0' == false为true，[] == false为true，NaN == NaN为false。[] == ![]可逐步推导：![]先得false，表达式变为[] == false；布尔转数字得[] == 0；对象转原始值得'' == 0；字符串转数字得0 == 0；最后为true。工程上==唯一广泛认可的写法是value == null，用于一行同时判断null和undefined，等价于value === null || value === undefined。

2. 1 === '1'; // false
3. null === undefined; // false
4. NaN === NaN; // false
5. +0 === -0; // true
6. Object.is(NaN, NaN); // true
7. Object.is(+0, -0); // false
8. Number.isNaN('abc'); // false，不转换
9. isNaN('abc'); // true，全局isNaN先做ToNumber
10. [NaN].includes(NaN); // true，SameValueZero
11. [NaN].indexOf(NaN); // -1，严格相等
12. new Set([NaN, NaN]).size; // 1
13. new Set([0, -0]).size; // 1

复制代码

===类型不同直接false，类型相同再比值，对象比引用。它有两个不完美处：NaN === NaN为false，+0 === -0为true，都源于IEEE 754。判NaN用Number.isNaN(x)，不要用全局isNaN；Object.is对应SameValue，修复了这两处分歧，React的useState内部就用它比较新旧state。SameValueZero与Object.is区别只在认为+0和-0相等，它是Map/Set键去重和Array.prototype.includes的判断标准。选型上：默认===；判空可用== null或??；精确处理NaN或±0用Object.is；集合类API行为由SameValueZero决定。

四、逻辑运算符与默认值赋值

&&和||返回决定结果的操作数本身，不返回布尔。'hi' && 'there'得'there'，0 && 'there'得0，null || 'fallback'得'fallback'，1 && 2 && 3得3。这个语义带来防御性访问，也带来React条件渲染事故：如果count是购物车数量，count && <Cart />在count为0时返回0，React会把数字0渲染到页面。修复可用count > 0 && <Cart />、!!count && <Cart />或count ? <Cart /> : null。!先ToBoolean再取反，!!x与Boolean(x)等价。

??只在左侧为null或undefined时取右侧。??=、||=、&&=都是短路赋值：条件不满足时右侧不执行。给配置补默认值时，0、空串、false属于合法业务值的字段必须走??系：settings.volume ??= 50会保持用户设置的0；如果换成||=，volume会被覆盖成50。&&=适合存在才修改，例如user &&= {...user, lastLogin: Date.now()}。复合赋值还有个规范细节：a += b只对a求值一次，a = a + b求值两次，左值带getter、函数调用或arr[i++]时行为不同。

2. const settings = { volume: 0 };
3. settings.volume ??= 50; // 保持0
4. settings.muted ??= false;
5. settings.lang ??= 'zh-CN';
7. let user = null;
8. user &&= { ...user, lastLogin: Date.now() }; // user为null时右侧不求值

复制代码

五、排查清单

默认值逻辑先判断字段是否允许0、空串、false，允许就用??或??=；判空优先value == null；日常比较默认===；判NaN用Number.isNaN；字符串数字比较前显式转数值，版本号要拆段比较；金额和浮点比较按场景选择整数、字符串、decimal库或误差范围；不要用new Boolean/Number/String；避免同一表达式多次自增；不要在循环里用delete处理数组元素，原文把它列为事故高发点，删除后留下的空洞会影响后续遍历，应改用语义明确的数组操作。理解抽象转换和短路返回值后，[] == ![]、null >= 0、typeof null等看似灵异的结果都能按规范一步步推出来，而不是靠背面试题。

热心网友1

这篇整理得很实在，把抽象操作和实际踩坑对应起来，比只背结论有用得多。 几个点特别有共鸣：Date 在 default hint 下走字符串转换，线上真踩过，new Date() + 1 直接得到一长串字符串，当时排查了半天；{} + [] 的差异归因于语句位置而不是运算符本身，这个解释很清楚，很多人只记住了“结果不一样”却不知道原因。数组 valueOf 返回自身、最终落到 join 的那条链路也讲得很直观，[] + []、[1,2] + [3,4] 的例子一看就懂。 实践上我们这边基本把 == 禁掉了，只保留 x == null 这种同时覆盖 null 和 undefined 的写法，但会加注释写明意图；如果业务上只想判断 null，就用 === null。关系运算符那块我也倾向先显式转数字再比较，null 和 undefined 参与大小比较时那组 true/false 太反直觉，不值得留推理成本。另外 n % 2 !== 0 这个提醒很实用，负数取余的符号问题确实容易在边界用例里翻车。 标题里提到空值合并，不过正文好像到宽松相等这里就断了，?? 与 || 的差异（0、空串、false 会不会被当成缺省值吞掉），以及 ?? 和 &&、|| 混用必须加括号这些如果能补上，整份清单就更完整了。整体内容挺适合放到团队 wiki 里当 code review 的检查项。

热心网友1

整理得很细，尤其是几个容易混淆的点讲得很清楚。null >= 0 那段用 !(null < 0) 反推的方式比直接背结论好记多了；{} + [] 因为语法解析位置不同结果不同这个坑，我以前在控制台里也疑惑过，看到说明才算彻底明白。 想补充两点自己踩过的： 一是浮点比较用 EPSILON 相对误差写法时，Math.max 里如果两边都是 0，阈值就是 0，对于刚好等于 0 的比较没问题，但如果是极小非零值，可能还是建议加个绝对下限，避免出现过于严格的判定。 二是标题里提到了空值合并，正文目前停在宽松相等这部分，还没展开 ??、??= 和 ||、&& 在选择默认值时的区别。实际项目里，对象属性用 || 给默认值会把 0、''、false 也吃掉，这类问题比 == 更常见，很期待后续把默认值语义和排查清单补完。 另外问一句，第一段里提到的“BigInt 不能和 Number 直接混算”是规范层面直接抛 TypeError，还是有个别运算符例外？记得比较运算好像可以跨类型，想确认一下。 整体来说很适合放进团队新人文档，按“转换地基—运算符行为—相等性—默认值”这条线走下来确实比零散记知识点更有系统。

热心网友1

这篇整理得挺系统的，把四个抽象转换入口拎出来讲，比单纯背“隐式转换规则”清楚多了，尤其是 Date 在 default hint 下走字符串、数组最终落到 join 这两点，很多线上诡异拼接就是栽在这儿。 几个自己踩过坑的地方补充一下，跟你思路是一致的： 一是金额和浮点那块，除了整数分单位和 decimal.js，比较时用 Number.EPSILON 那个相对误差公式我一般会封装成一个 eq 函数，不然每个地方手写容易把 Math.max 写错成 Math.min，边界上就漏了。 二是判断“是不是 NaN”，千万别用 x === NaN，也别直接用全局 isNaN，那玩意会先做 ToNumber，isNaN('abc') 是 true 但字符串根本不是 NaN。ES6 的 Number.isNaN 才是只看类型和值的，属于你说的转换地基那层的延伸应用。 三是取余修正那招 ((a % b) + b) % b，b 为负数时结果会跟着变负，如果业务上要求严格非负，最好先对 b 取绝对值或者断言 b > 0，不然以为修好了其实没修。 另外你正文停在“工程上 == 唯一广泛认可的写法”这里就没下文了，后面关于 == 选型建议、?? 与 || 的短路差异、可选链那部分是不是还没贴完？尤其 ?? 那块，跟 || 在 0、''、false 上的分歧挺值得展开的，期待补上。