条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。本运算符经常作为if语句的简短形式来使用。

语法

condition ? expr1 : expr2 

参数

condition (or conditions)
计算结果为truefalse的表达式。
expr1, expr2
值可以是任何类型的表达式。

描述

如果conditiontrue,运算符就会返回 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

你也可以在 expr1expr2里使用一个或多个的操作(用逗号分隔):

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中实现。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

参见

文档标签和贡献者

标签: 
此页面的贡献者: KnightYin, pluwen, zhangchen, ziyunfei, Ende93, lunix01
最后编辑者: KnightYin,