三元运算符仅适用于单表达式赋值，语法为condition ? expriftrue : expriffalse；需确保分支同类型、无副作用，嵌套易出错，jsx中需防falsy陷阱，ts中注意类型收窄。
三元运算符的基本写法和适用场景
三元运算符不是万能的，它只适合「单表达式赋值」——即条件判断后，左右两边都是能直接求值的表达式，且不带副作用（比如不调用 console.log、不修改状态、不触发 API 请求）。一旦你发现需要在分支里写多条语句，或者要复用某个计算结果，就该退回 if...else。
JavaScript 中语法是：condition ? exprIfTrue : exprIfFalse。注意：两个分支必须返回同类型或至少能被统一处理的值，否则后续逻辑容易出隐式转换问题。
- ✅ 适合：
const status = isActive ? 'online' : 'offline'; - ❌ 不适合：
isActive ? doLogin() : doLogout();（这不是赋值，是动作） - ⚠️ 危险：
const price = hasCoupon ? 99 : null;（后续用price * tax会得NaN）
嵌套三元容易读错，优先拆成变量或用 if
有人试图用嵌套三元处理多个条件，比如：status === 'pending' ? '等待中' : status === 'success' ? '成功' : '失败'。这种写法视觉上难对齐，编辑器也不好断点调试，而且一旦加个空格或少个括号，JS 会按右结合规则解析，结果可能和预期相反。
更稳妥的做法是把中间状态先提取出来：
const statusText = {
pending: '等待中',
success: '成功',
failed: '失败'
}[status] ?? '未知状态';
或者老老实实用 if...else if...else —— 多几行代码，但改起来不心慌。
React JSX 中用三元要注意 falsy 值渲染陷阱
在 JSX 里写 {isLoading ? <spinner></spinner> : <content></content>} 没问题，但下面这几种容易翻车：
-
{count > 0 ? count : '暂无'}→ 如果count是0，0是 falsy，整个表达式会渲染'暂无'，而不是你想要的0 -
{data && data.length ? data.map(...) : <empty></empty>}→ 这其实不是三元，是逻辑运算符，且data.length为0时也会 fallback
正确写法是显式比较：
{count >= 0 ? count : '暂无'}
或者用空值合并操作符配合三元：
{(count ?? -1) >= 0 ? count : '暂无'}
TypeScript 下三元会影响类型推导，必要时加类型断言
TypeScript 会根据两个分支的类型做联合推导。比如 isActive ? 'active' : 123，推导出类型是 string | number，后续调用 .toUpperCase() 就会报错。
如果业务上你**确定**某一分支不会出现（比如后端保证 status 只有 'A'/'B'），又不想加运行时校验，可以手动收窄类型：
const status = isSpecial ? ('A' as const) : ('B' as const); // 类型是 'A' | 'B'
但更推荐的方式是定义明确的字面量类型：
type Status = 'A' | 'B';<br>const status: Status = isSpecial ? 'A' : 'B';
这样既安全，又不用到处加 as const。
真正麻烦的是异步数据刚进来还没赋值时的初始状态，这时候三元左边可能是 undefined，右边是字符串，联合类型就变宽了——别硬撑，用 ?? 或初始化默认值更干净。
