TypeScript 空值合并怎么用

早上写代码的时候，我刚想给一个用户昵称做个默认值，就碰到了个麻烦事儿：如果用户没填昵称，用空字符串或者 undefined 代替的话，之前写的逻辑总是出问题——要么显示个空白，要么报个奇怪的错误。后来才知道，TypeScript 里有个专门解决这类问题的“小工具”，叫空值合并，今天就用生活里的例子给大家讲明白。

先搞懂：什么值才是“该合并”的？

先别急着记概念，咱们举个买奶茶的例子：你点了一杯珍珠奶茶，要求“少糖”。如果商家没有“少糖”选项，你会接受“无糖”或者“半糖”吗？肯定不会，你只认真正满足“少糖”的选项。

对应到代码里，TypeScript 里的空值合并，就只认两种“不合格”的值：null 和 undefined。像空字符串 ''、数字 0、布尔值 false 这些，都是你明确要的“有效内容”，空值合并是不会把它们替换掉的。

比如你写 const 奶茶甜度 = '' ?? '少糖'，结果会是 ''，而不是自动换成“少糖”；但如果是 const 奶茶甜度 = null ?? '少糖'，结果才是你要的“少糖”。这就对应了买奶茶的逻辑，空值合并只替换真的“没值”的情况。

怎么用？一句话搞定默认值

空值合并的语法特别简单，就是两个英文问号 ??，左边是要检查的变量，右边是左边为 null/undefined 时的默认值。

还是回到开头的用户昵称例子：之前如果用普通的 || 做默认值，会出问题——比如用户没填昵称，存的是空字符串 ''，用 const 显示昵称 = 输入昵称 || '匿名用户'，会把空字符串当成“假值”，自动换成“匿名用户”，但用户其实只是没填，不是要匿名。

换成空值合并就不一样了：const 显示昵称 = 输入昵称 ?? '匿名用户'，只有当 输入昵称 是 null 或 undefined 时，才会显示“匿名用户”，如果用户真的填了空字符串，就会正常显示空白——完全符合需求。

搭配可选链用，更省心

平时写代码，变量里的空值还可能来自深层属性。比如你想拿用户的收货地址里的“街道”，但用户没填地址的话，user.address 可能是 null。

这时候可以把空值合并和可选链 .? 一起用：const 收货街道 = user?.address?.street ?? '暂未填写地址'。这里的 ?. 会先检查 user 有没有值，user.address 有没有值，只要中间有一个是 null/undefined，整个表达式就会触发空值合并，返回“暂未填写地址”，不会报“Cannot read property 'street' of null”这种常见错误。

别搞错：和 || 的区别

最后再提醒一个容易踩的坑：别把 ?? 和 || 搞混。|| 会把所有“假值”（''、0、false 都算）都替换，而 ?? 只认 null/undefined。

举个简单的例子：const 优惠金额 = 0 ?? 10，结果是 0；但如果是 const 优惠金额 = 0 || 10，结果就是 10。如果你本来想给老用户优惠 0 元（比如满减刚好抵消），用 || 就会错误地给了 10 元，而 ?? 就不会，这就是两者的核心区别。

现在再看之前的奶茶例子，你就会发现空值合并的逻辑特别贴合日常需求——只替换真正“不存在”的内容，不随便修改你明确给出的有效值。用它来处理默认值、深层属性的空值，比之前的方法少踩很多坑，是 TypeScript 里非常实用的小技巧。