三元运算符适用于单行、无副作用的值选择型判断,如赋值或返回值;不可用于含副作用、多语句或复杂条件的场景;可与解构、空值合并等特性结合提升简洁性。

三元运算符(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。团队协作中,统一风格比单行省字符更重要。


















