Conditional Operator

Conditional Operator

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

语法

condition ? expr1 : expr2

参数

condition计算结果为true或false的表达式。

描述

如果条件值为真值(true),运算符就会返回 expr1 的值;否则, 就会返回 expr2 的值。例如, 根据 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"

还可以把三元操作符用在等式的左边:

var condition1 = true, condition2 = false, access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false" console.log(access // logs "true false"

注:括号不是必需的,不影响功能。他们在那里帮助想象如何处理结果。

您也可以在自由空间中使用三元评估来执行不同的操作:

var stop = false, age = 16; age > 18 ? location.assign('continue.html') : stop = true;

您也可以对每个案例进行多个操作,用逗号分隔,并将其括在括号中:

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!')

在赋值时,您也可以执行多个操作。在这种情况下,括号的最后逗号分隔值 将是要分配的值

var age = 16; var url = age > 18 ? ( alert('OK, you can go.'), // alert returns "undefined", but it will be ignored because // isn't the last comma-separated value of the parenthesis 'continue.html' // the value to be assigned if age > 18 ) : ( alert('You are much too young!'), alert('Sorry :-('), // etc. etc. 'stop.html' // the value to be assigned if !(age > 18) location.assign(url // "stop.html"

返回三元语句

三元运算符很适合于函数返回,否则需要if/else声明。

var func1 = function( .. ) { if (condition1) { return value1 } else { return value2 } } var func2 = function( .. ) { return condition1 ? value1 : value2 }

一个很好的方法来发现,三元将是一个合适的替代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 }

规范

SpecificationStatusComment
ECMAScript Latest Draft (ECMA-262)The definition of 'Conditional Operator' in that specification.Living Standard
ECMAScript 2015 (6th Edition, ECMA-262)The definition of 'Conditional Operator' in that specification.Standard
ECMAScript 5.1 (ECMA-262)The definition of 'The conditional operator' in that specification.Standard
ECMAScript 1st Edition (ECMA-262)The definition of 'The conditional operator' in that specification.StandardInitial definition. Implemented in JavaScript 1.0.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)

FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)