首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Conditional Operator

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

语法

代码语言:javascript
复制
condition ? expr1 : expr2 

参数

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

expr1,expr2值可以是任何类型的表达式。

描述

如果条件值为真值(true),运算符就会返回 expr1 的值;否则, 就会返回 expr2 的值。例如, 根据 isMember 变量的值显示不同的信息,可以使用下面的表达式:

代码语言:javascript
复制
'The fee is ' + (isMember ? '$2.00' : '$10.00');

同样也可以把三元运算符的值赋值给一个变量:

代码语言:javascript
复制
var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';

多个三元操作符也是可能的(注:条件运算符是右结合):

代码语言:javascript
复制
var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
  
console.log(access); // logs "Access granted"

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

代码语言:javascript
复制
var condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");

console.log(access); // logs "true false"

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

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

代码语言:javascript
复制
var stop = false, age = 16;

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

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

代码语言:javascript
复制
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!')
);

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

代码语言:javascript
复制
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声明。

代码语言:javascript
复制
var func1 = function( .. ) {
  if (condition1) { return value1 }
  else { return value2 }
}

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

一个很好的方法来发现,三元将是一个合适的替代if/else语句是return关键字多次使用,是唯一的表达式内的if块。

通过将三元数字分成多行,并使用多余的空格,可以使用三元运算符来非常干净地替换冗长的一系列if/else语句。这提供了一种表达相同逻辑的句法轻松的方式:

代码语言:javascript
复制
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)

扫码关注腾讯云开发者

领取腾讯云代金券