阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JS 三元条件运算符

      (condition ? ifTrue : ifFalse)

      条件运算符根据条件的逻辑值返回两个值之一。

      功能

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

      演示

      function getFee(isMember) {
        return (isMember ? "$2.00" : "$10.00");
      }
      
      console.log(getFee(true));
      // expected output: "$2.00"
      
      console.log(getFee(false));
      // expected output: "$10.00"
      
      console.log(getFee(1));
      // expected output: "$2.00"
      

      语法

      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
      }
      

      规范

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