三元嵌套适用于3–5种状态的简易流转，应左深优先、逐层判断并设兜底值；超4种状态推荐对象映射或switch；需注意类型安全与渲染异常风险。
在三元运算符中嵌套三元表达式，是处理有限多状态（如 3–5 种）简易流转的常见技巧，关键在于保持可读性与逻辑清晰，避免过度嵌套导致维护困难。
明确状态流转逻辑再写嵌套
不要一上来就堆三元，先用文字或流程图理清状态顺序。比如一个按钮状态流转：空闲 → 加载中 → 成功 → 失败 → 空闲，但实际前端常只关注当前 UI 显示值（如文案或图标），对应状态字段可能是 status（'idle' | 'loading' | 'success' | 'error'）。此时三元嵌套目标很明确：根据 status 返回不同文案。
从外到内逐层判断，每层只处理一个分支点
嵌套时建议“左深优先”，即最外层判断第一个区分态，再向内展开。例如：
status === 'idle' ? '开始操作' : status === 'loading' ? '处理中...' : status === 'success' ? '已完成' : '出错了'
这比写成 ((status === 'idle') ? ... : ((status === 'loading') ? ... : ...)) 更易读。注意：JavaScript 中三元运算符是右结合，但人为按左序书写更符合直觉。
超过 4 种状态建议换方案
- 状态数 ≥ 5 时，嵌套三元会迅速变难维护，容易漏分支或括号错位；
- 推荐改用对象映射：
{ idle: '开始操作', loading: '处理中...', success: '已完成', error: '出错了' }[status] || '未知状态'； - 若需带副作用（如触发函数），用
switch或 if-else 更稳妥； - React 中还可封装为自定义 Hook 或状态机（如 xstate）来管理复杂流转。
注意类型安全和兜底
嵌套三元容易忽略默认分支，导致 undefined。务必确保最后一层有兜底值：
status === 'idle' ? '开始' : status === 'loading' ? '进行中' : status === 'success' ? '成功' : '失败' ✅
status === 'idle' ? '开始' : status === 'loading' ? '进行中' : status === 'success' ? '成功' : null ❌（null 可能引发渲染异常）
TypeScript 下还可配合 as const 或 exhaustive check 提前暴露遗漏状态。
