条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。本运算符经常作为if
语句的简短形式来使用。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
condition ? expr1 : expr2
condition (or conditions)
true
或false
的表达式。expr1
, expr2
如果condition
为true
,运算符就会返回 expr1
的值;否则, 就会返回 expr2
的值。
一个简单的例子,测试你是否达到了美国法定的饮酒年龄。
var age = 26; var canDrinkAlcohol = (age > 21) ? "True, over 21" : "False, under 21"; console.log(canDrinkAlcohol); // "True, over 21"
另一个例子,根据isMember
变量的值显示不同的信息,可以使用下面的表达式:
"The fee is " + (isMember ? "$2.00" : "$10.00")
同样也可以把三元运算符的值赋值给一个变量:
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
多个三元操作符也是可能的(注:条件运算符是右结合):
var firstCheck = false, secondCheck = false, access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted"; console.log( access ); // logs "Access granted"
你也可以像使用多重条件的IF表达式一样使用三元运算符
var condition1 = true, condition2 = false, access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false"); console.log(access); // 输出 "true false"
注: 在这里三元表达式的括号不是必须的,删去后不影响执行顺序。在这里加入它们是为了更好的看出结果是如何得出的。
还可以把三元操作符用在等式的左边:
var stop = false, age = 16; age > 18 ? location.assign("continue.html") : stop = true; stop; // true
你也可以在 expr1
、expr2
里使用一个或多个的操作(用逗号分隔):
var stop = false, age = 23; age > 18 ? ( alert("OK, you can go."), location.assign("continue.html") ) : ( stop = true, alert("Sorry, you are much too young!") );
同样也可以在赋值过程中做多个操作。 如下所示,会将括号里的最后一个逗号分隔的值赋给变量url
。
var age = 16; var url = age > 18 ? ( alert("OK, you can go."), // alert 返回的值是 "undefined", 但它会被忽略,因为 // 不是括号的最后一个逗号分隔值 "continue.html" // 如果 age > 18,则这个值赋值给 url ) : ( alert("You are much too young!"), alert("Sorry :-("), // 等等 "stop.html" // 如果 !(age > 18) 为真,则这个值赋值给 url ); location.assign(url); // "stop.html"
三元运算符能够很好地用在函数返回值的表达式中,此时不需要 if/else
语句。
var func1 = function( .. ) { if (condition1) { return value1 } else { return value2 } } var func2 = function( .. ) { return condition1 ? value1 : value2 }
一种使用三元表达式作为返回值,测试是否达到美国法定饮酒年龄函数的常用方法
function canDrinkAlcohol(age) { return (age > 21) ? "True, over 21" : "False, under 21"; } var output = canDrinkAlcohol(26); console.log(output); // "True, over 21"
一个发现能恰当替换掉 if/else
表达式的好办法是,观察是否存在 return
关键字被使用多次, 并且每次使用都是在 if 块的内部。
通过将三元表达式使用额外的空格,拆分写在多行,使得三元运算符能干净利落地替代一个很长的if/else
表达式。在语法上,它使用了一种更明快的方式来表达了相同的逻辑:
var func1 = function( .. ) { if (condition1) { return value1 } else if (condition2) { return value2 } else if (condition3) { return value3 } else { return value4 } } var func2 = function( .. ) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4 }
Specification | Status | Comment |
---|---|---|
ECMAScript Latest Draft (ECMA-262) Conditional Operator |
Draft | |
ECMAScript 2015 (6th Edition, ECMA-262) Conditional Operator |
Standard | |
ECMAScript 5.1 (ECMA-262) The conditional operator |
Standard | |
ECMAScript 1st Edition (ECMA-262) The conditional operator |
Standard | 首次定义。在 JavaScript 1.0中实现。 |
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Conditional operator (c ? t : f ) | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes | nodejs Full support Yes |