您如何使用?:(条件)运算符在JavaScript中?


434

有人可以用简单的词向我解释什么是?:(有条件的“三元”)运算符,以及如何使用它?


2
这些是运算符。操作数是您使用这些运算符的值。
BoltClock

7
有趣的事实:某些语言(即Groovy)实际上有一个操作数?:(如您所写的,之间没有任何语句)-Elvis运算符。很聪明
Rob Hruska


3
谷歌搜索符号可能会出现问题,但是谷歌搜索“ Javascript运算符”(并学习它们)又如何呢?
nnnnnn

Answers:


645

这是if-else语句的单行简写。它称为条件运算符。1个

这是可以通过条件运算符缩短的代码示例:

var userType;
if (userIsYoungerThan18) {
  userType = "Minor";
} else {
  userType = "Adult";
}

if (userIsYoungerThan21) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

可以这样缩短?:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

与所有表达式一样,条件运算符也可以用作具有副作用的独立语句,尽管在缩小之外这是不常见的:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

它们甚至可以链接:

serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');

但是要小心,否则最终将得到如下复杂的代码:

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;

1 通常称为“三元运算符”,但实际上它只是一个三元运算符[一个接受三个操作数的运算符]。不过,这是目前唯一的JavaScript。


56
只是为了澄清名称:ternary是运算符的类型(即,它由3部分组成)。名特定三元运算符conditional operator。JS中恰好只有一个三元运算符,因此这些术语被滥用。
Gone Coding

1
@tryingToGetProgrammingStraight三元形式从技术上讲是一个表达式,表达式可以包含其他表达式以形成表达式树。该代码正好是一个表达式树:)参见:fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup

1
强烈建议针对常见用例而不是经常被引用为对操作员的滥用的副作用用例更新示例。
TJ Crowder

7
不确定为什么底部会有一点语法模糊,但这是不正确的。如果javascript只有一种类型的运算符,那么说出三元运算符而不是三元运算符是绝对正确的。愚蠢的,只要使用THE,就意味着所有这些。
安德鲁

1
@MarkCarpenterJr在JavaScript中,执行此||操作的典型方法是使用运算符,因为如果左侧的值是true,则会短路。
彼得·奥尔森

142

我想添加一些给定的答案。

如果在“显示已设置变量的情况下,否则...”的情况下遇到(或想要使用)三元,则可以使其更短,而无需三元


代替:

var welcomeMessage  = 'Hello ' + (username ? username : 'guest');

您可以使用:

var welcomeMessage  = 'Hello ' + (username || 'guest');

这与PHP的速记三元运算符相当 ?:

甚至:

var welcomeMessage  = 'Hello ' + (username || something || maybethis || 'guest');

它对变量求值,如果它是false或未设置,它将继续到下一个。


4
我在三元挣扎中,最终找到了这个答案。谢谢!
Ljubisa Livac

如果不使用中的三元运算符大括号 'Hello ' + (username ? username : 'guest')Hello + 则将其忽略,仅返回三元运算的结果。谁能解释为什么?
希瓦

2
@Shiva没有brackes,其演算值为的整个左半部分:'Hello ' + username,这是永远true的,因为它是一个长度大于0的字符串
杰弗里·罗森达尔

26

它称为“三元”或“条件”运算符。

?:运算符可用作if ... else语句的快捷方式。它通常用作if ... else语句比较笨拙的较大表达式的一部分。例如:

var now = new Date();
var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");

该示例创建一个包含“晚安”的字符串。如果是下午6点之后。使用if ... else语句的等效代码如下所示:

var now = new Date();
var greeting = "Good";
if (now.getHours() > 17)
   greeting += " evening.";
else
   greeting += " day.";

来自MSDN JS文档

基本上,这是一个简写的条件语句。

另请参阅:


5
它实际上称为条件运算符。
ChaosPandion 2011年

5
它是三元条件运算符
Petah

4
@Michael-请参阅规范的11.12节“ 条件运算符(?:)”
ChaosPandion 2011年

7
人们还在为这些东西争论吗?真是的
BoltClock

7
@BoltClock-不完全争论,只是尝试规范化我们的基本词汇。
2011年

21

当您所有的都是符号时,用Google搜索会有点困难;)要使用的术语是“ javascript条件运算符”。

如果您在Javascript中看到更多有趣的符号,则应尝试首先查找Javascript的运算符:MDC的运算符列表。您可能会遇到的一个例外是$符号

为了回答您的问题,条件运算符替换了简单的if语句。最好的例子是:

var insurancePremium = age > 21 ? 100 : 200;

代替:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}

很好的解释,但是该示例很差,因为它根据布尔表达式的结果分配布尔值,这没有什么意义。您想var olderThan20 = age > 20;代替使用。
BalusC

@BalusC-是的:)我意识到了这一点,但是很难从例子中脱颖而出!会想到一个更好的人吗?
唐英年


7

大多数答案是正确的,但我想补充一点。该三元运算符是右结合的,这意味着它可以被链接以下列方式if … else-if … else-if … else

function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

相当于:

function example() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

更多细节在这里


1
这就是我要寻找的。
Sazal Das


6

三元运算符

通常,我们在Javascript中有条件语句。

例:

if (true) {
    console.log(1)
} 
else {
    console.log(0)
}
# Answer
# 1

但它包含两行或更多行,因此无法分配给变量。Javascript为该问题三元运算符提供了一种解决方案。三元运算符可以写在一行中并分配给一个变量。

例:

var operator = true ? 1 : 0
console.log(operator)
# Answer
# 1

此三元运算符在C编程语言中类似。


5

嗨,伙伴们还记得js通过评估true或false起作用,对吗?

让我们来一个三元运算符:

questionAnswered ? "Awesome!" : "damn" ;

首先,js检查questionAnswered是true还是false

如果 true?),您将获得“超赞!”

否则(:),您将获得“该死”;

希望这对朋友有帮助:)



2
x = 9
y = 8

一元

++x
--x

二元

z = x + y

三元

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";


1

这可能并不是最完美的方法。但是对于不熟悉三元运算符的人来说,这可能会很有用。我个人的喜好是执行1线性后备而不是条件阻止。

  // var firstName = 'John'; // Undefined
  var lastName = 'Doe';

  // if lastName or firstName is undefined, false, null or empty => fallback to empty string
  lastName = lastName || '';
  firstName = firstName || '';

  var displayName = '';

  // if lastName (or firstName) is undefined, false, null or empty
  // displayName equals 'John' OR 'Doe'

  // if lastName and firstName are not empty
  // a space is inserted between the names
  displayName = (!lastName || !firstName) ? firstName + lastName : firstName + ' ' + lastName;


  // if display name is undefined, false, null or empty => fallback to 'Unnamed'
  displayName = displayName || 'Unnamed';

  console.log(displayName);

三元运算符


1

我们可以使用Jquery以及length,如下例所示:

假设我们有一个具有值的GuarantorName文本框,并且想要获取名字和姓氏-它可能为null。所以比

        var gnamesplit = $("#txtGuarantorName").val().split(" ");
        var gLastName = "";
        var gFirstName = "";
        if(gnamesplit.length > 0 ){
           gLastName  = gnamesplit[0];        
        }
        if(gnamesplit.length > 1 ){
           gFirstName = gnamesplit[1];        
        }

我们可以将以下代码与带有最少代码的Jquery一起使用

    

    var gnamesplit = $("#txtGuarantorName").val().split(" ");
    var gLastName = gnamesplit.length > 0  ? gnamesplit[0] : "";
    var gFirstName =  gnamesplit.length > 1  ? gnamesplit[1] : "";
    $("#txtLastName").val(gLastName);
    $("#txtFirstName").val(gFirstName);
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
  Guarantor Name: <input type="text" id="txtGuarantorName" value="ASP.NET Core"  /><br/>
  <br/>
  <br/>
  
  First Name: <input type="text" id="txtLastName" value="ASP.NET Core"  />
  Last Name: <input type="text" id="txtFirstName" value="ASP.NET Core"  />
</div>


1

三元表达式在JS中非常有用,尤其是React。这是对提供的许多优质详细信息的简化答案。

condition ? expressionIfTrue : expressionIfFalse

想想expressionIfTrue作为OG if语句呈现真实的;
认为是expressionIfFalseelse陈述。

例:

var x = 1;
(x == 1) ? y=x : y=z;

这将检查x的值,如果为true,则返回第一个y =(value),如果为false,则返回第二个冒号:返回y =(value)。


0

条件(三元)运算符是唯一采用三个操作数的JavaScript运算符。该运算符通常用作if语句的快捷方式。

condition ? expr1 : expr2 

如果条件为true,则运算符返回expr1的值;否则,返回0。否则,它返回expr2的值。

function fact(n) {
  if (n > 1) {
    return n * fact(n-1);
  } else {
    return 1;
  }
  // we can replace the above code in a single line of code as below
  //return (n != 1) ? n * fact(n - 1) : 1;
}
console.log(fact(5));

有关更多说明,请阅读MDN文档链接


0

如果您在javascript中有一个条件检查实例函数。使用三元运算符很容易。只需一行即可实现。例如:

    private module : string ='';
    private page:boolean = false;
    async mounted(){
     if(this.module=== 'Main')
    {
    this.page = true;}
    else{
    this.page = false;
    }
}

具有一个条件的这样的函数可以写成如下。

this.page = this.module=== 'Main' ?true:false;

健康)状况 ?如果为真:如果为假


-3
 (sunday == 'True') ? sun="<span class='label label-success'>S</span>" : sun="<span class='label label-danger'>S</span>";

 sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"

您也可以使用三元运算符附加html
Chandrashekhar Komati

多数民众赞成真的不是你应该如何编写三元分配,也可以使用===不==其他方式,也可以这样做。sunday ?它应该是sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley

条件三进制的全部要点是缩短条件赋值,否则您应该只使用if语句
TheRealMrCrowley

现在告诉我这是正确还是错误。如果你说的不对,然后还,这是工作,我用我的项目..
钱德拉希克哈科马提

我知道它在第一个示例中的工作方式“起作用”,但是我提供的作为第二个版本的内容也是如此。请注意,最高版本与我给您的版本有多少不必要的重复。JS是被发送到浏览器的代码,因此代码长度很重要
TheRealMrCrowley
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.