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
}

规范

Specification	Status	Comment
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.	Standard	Initial definition. Implemented in JavaScript 1.0.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)