三元运算符适用于单行、无副作用的值选择型判断，如赋值或返回值；不可用于含副作用、多语句或复杂条件的场景；可与解构、空值合并等特性结合提升简洁性。
三元运算符（condition ? exprIfTrue : exprIfFalse）适合替代单行、无副作用的 if-else 分支，能让代码更紧凑、可读性不降反升——前提是逻辑本身简单明确。
适用场景：值选择型判断
当 if-else 仅用于给变量赋值或返回值，且两个分支都只计算一个表达式时，三元运算符最自然。
-
替换赋值：
原写法：let status = '';<br>if (score >= 60) {<br> status = 'pass';<br>} else {<br> status = 'fail';<br>}
精简后：const status = score >= 60 ? 'pass' : 'fail'; -
替换返回值：
函数中直接返回不同结果：const getGrade = (score) => score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';
（注意：嵌套三元需谨慎，超过两层建议回归 if-else）
不可滥用：避开副作用和复杂逻辑
三元运算符不是 if-else 的万能压缩器。以下情况坚决不用：
- 分支中含函数调用（如
doSomething()）、修改状态、发起请求等副作用操作； - 任一分支包含多条语句（哪怕只是加个 console.log）；
- 条件判断本身已嵌套多层、或涉及多个变量组合（例如
(a && b) || (!c && d)），此时三元反而降低可读性。
进阶技巧：与解构、默认值结合
三元常和现代 JS 特性配合，进一步精简常见模式：
-
提供默认值：
const name = userInfo?.name ?? (isGuest ? 'Anonymous' : 'Unknown'); -
解构时选字段：
const { id, title, content } = article;<br>const displayText = isPreview ? content.substring(0, 100) + '...' : content;
可合并为：const displayText = isPreview ? `${content.substring(0, 100)}...` : content;
风格提醒：保持“一眼可读”
三元的核心价值是提升表达效率，不是炫技。只要阅读者需要停顿思考“哪个冒号对应哪个条件”，就该换回 if-else。团队协作中，统一风格比单行省字符更重要。
