JavaScript 空值合并怎么用

在日常写网页代码时，很多人都会遇到“变量可能没值，需要用默认值替代”的情况。比如做一个用户收货地址的输入框，用户没填省份的话，就自动显示“未填写”，这时候就需要给空变量设置替补值，而JavaScript里的空值合并，就是专门处理这种需求的实用方法。

先搞懂：哪些值会被“当成空”

很多新手刚开始会用||（逻辑或）来给变量设默认值，但它有个坑：不止null、undefined算“没值”，像0（数字零）、''（空字符串）、false这些其实是合法值，用||会误替换。比如想把销量为0的商品保留，销量 = 0 || 100会变成100，显然不对。

而空值合并??只认真正的“空值”：只有null和undefined才会触发替补，其他哪怕是看起来“没用”的值，都会保留原来的内容。比如用户没填省份，province = userInput.province ?? '未填写'，如果用户输入了空字符串''，province就会是''，不会变成默认值，刚好避开了||的坑。

生活化例子：外卖地址的小细节

举个大家都熟悉的外卖场景：假设我们要获取用户的“门牌号”，如果用户没填（undefined）或者删了内容（null），就显示“请补充门牌号”；但如果用户填了0号门（比如特殊的门牌号），就应该保留0。

用空值合并写的话，代码非常直白：

`javascript

// 模拟用户的地址数据，这里门牌号没填，是undefined

const userAddress = { doorNumber: undefined };

// 用??设置默认值，仅当doorNumber是null/undefined时生效

const finalDoor = userAddress.doorNumber ?? '请补充门牌号';

console.log(finalDoor); // 输出：请补充门牌号

`

如果用户填了0号门：

`javascript

const userAddress = { doorNumber: 0 };

const finalDoor = userAddress.doorNumber ?? '请补充门牌号';

console.log(finalDoor); // 输出：0，完全符合需求

`

要是用||的话，0会被当成空，结果就变成“请补充门牌号”，反而出错，这就是空值合并最实用的地方。

注意：不能和&&、||一起用，得加括号

很多人刚用的时候容易踩一个小坑：如果要把空值合并和其他逻辑运算符连在一起写，直接用会报错。比如想写a && b ?? c，浏览器会分不清优先级，直接提示语法错误。

这时候只要给??两边加括号就行，比如改成(a && b) ?? c，或者a ?? (b || c)，就能正常运行。举个实际的例子：想先判断用户是不是VIP，再根据VIP等级给折扣，空值合并处理没等级的情况：

`javascript

const isVip = true;

const vipLevel = undefined; // 用户是VIP但没填等级

// 先判断是VIP，再用??补默认等级

const discount = isVip && vipLevel ?? 95; // 报错！

// 加括号修正后

const discount = (isVip && vipLevel) ?? 95;

console.log(discount); // 输出95，正确

`

什么时候用空值合并更合适

如果只是简单替换null/undefined，空值合并是首选，比写一堆if判断简洁太多；但如果确实要把0、空字符串这些当成“要替换的空”，那还是用||更合适。比如统计订单金额，没金额的时候用0，就可以写total = user.total || 0，不会出错。

简单总结：空值合并??就是专门给“真正没值”的变量设默认值的工具，避开了逻辑或的误判坑，代码写起来更省心，也减少了出错的可能。