`??` 和 `||` 搞混，线上用户头像全挂了

问题场景

上周五快下班，客服群突然炸了：

"好多用户头像显示空白！" "不是全部，大概 30% 的账号头像没了"

查前端日志，头像接口返回正常，url 字段有值。再看渲染层代码：

const avatarUrl = user.avatar?.url || '/default-avatar.png'

逻辑看似没毛病：有头像用头像，没有就用默认图。但诡异的是，有头像的用户也显示了默认图。

原因分析

问题出在 || 运算符的"激进"行为上。

|| 会把所有假值 (falsy) 都当成"没有"来对待。JavaScript 中的假值包括：

值	类型
''	空字符串
0	数字零
false	布尔假
null	空
undefined	未定义
NaN	非数字

排查后发现，这批头像异常的用户的 url 值刚好是 空字符串 '' — 头像服务在某些情况下会返回 url: ""（代表用户上传过头像但处理失败）。

// 实际数据
user.avatar = { url: '' }  // 空字符串，但 ≠ 没头像

// 执行逻辑
const avatarUrl = '' || '/default-avatar.png'
// → 空字符串是假值，被 || 吞掉，返回默认图 ❌

用户明明上传过头像（数据库有记录），只是因为图片处理失败返回了空串，就被 || 强制替换成默认图——这就成了"有头像但显示默认"的 bug。

解决方案

方案一：改用 ??（空值合并运算符）

const avatarUrl = user.avatar?.url ?? '/default-avatar.png'

?? 只会在左操作数为 null 或 undefined 时才取右侧值。''、0、false 都会原样保留。

注意： ?? 不能与 && 或 || 混用不括弧：

// ❌ 语法错误
const a = b ?? c || d

// ✅ 正确写法
const a = (b ?? c) || d

方案二：显式判断

const avatarUrl = user.avatar?.url && user.avatar.url.length > 0
  ? user.avatar.url
  : '/default-avatar.png'

更保险，但啰嗦。

方案三：后端统一语义

后端对 url 字段做约束：没有头像 → 不返回字段或返回 null；有头像（包括处理失败）都正确定义。前端只信任 ??。

深入：还有哪些地方容易踩？

场景 1：分数/数值 0

// 用户完成了 0 道题
const count = data.completedCount || '无数据'
// 0 被 || 吞掉，显示"无数据" ❌
const count = data.completedCount ?? '无数据'  // ✅ 显示 0

场景 2：CSS class 拼接

// 某个状态的 className 可能是空串 ''
const cls = statusClass || 'default-status'
// 空串时被覆盖 ❌
const cls = statusClass ?? 'default-status'  // ✅

场景 3：函数默认参数

function setTheme(color = '#333') { ... }

setTheme('')   // '' 是假值吗？不，函数默认参数只对 undefined 生效
// → 传入 '' 不会触发默认值，color = ''

函数默认参数的行为类似 ??，只对 undefined 生效。很多人误以为它和 || 一样。

要点总结

运算符	触发替换的条件	适用场景
??	null / undefined	后端可能缺失的字段、可选链取值
`		`	所有假值	兜底默认值（明确想过滤空串/0）
函数默认参数	仅 undefined	参数缺省传值

一句话黄金法则：

当你要表达"没有这个数据就用默认值"时，99% 的场景应该用 ??； 只有 1% 的场景（如用户输入为空时填默认文案）才刻意用 ||。

修完这个 bug 后的复盘会上，全组把 eslint 加了一条规则：

// .eslintrc
{
  "rules": {
    "no-unneeded-ternary": "error",
    "@typescript-eslint/prefer-nullish-coalescing": "error"
  }
}

并在代码 review checklist 里写死了一条："见到 || 接变量，先想想是不是应该用 ??"。

从此，头像空白 bug 再没出现过。