如何在JavaScript中使用三目运算符？

Question

< p >什么是?:（问号和冒号运算符，又称条件或“三元”）运算符，我该如何使用它？< /p >

- muudless

---

趣闻：一些编程语言（比如Groovy）实际上有一个操作符?:（与你所写的一样，两边没有语句）——Elvis运算符。相当聪明。 - Rob Hruska

可能是重复的问题：javascript if alternative - Rob Hruska

Answer 1

这是一种if-else语句的单行简写方式，称为条件运算符。¹ 以下是可以使用条件运算符缩短的代码示例：

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;

---

¹ 通常被称为“三元运算符”，但实际上它只是一个接受三个操作数的三元运算符。目前在JavaScript中，这是唯一的三元运算符。

- Peter Olson

---

仅为澄清名字：ternary 是运算符的类型（即它有3个部分）。那个特定的三元运算符的名字是 conditional operator。在JS中只有一个三元运算符，因此这些术语被误用。 - iCollect.it Ltd

@tryingToGetProgrammingStraight 三元形式在技术上是一个表达式，而表达式可以包含其他表达式来形成表达式树。那段代码就是表达式树的样子 :) 参见：http://fsharpforfunandprofit.com/posts/expressions-vs-statements/ - Alexander Troup

强烈建议更新示例以适应常见用例，而不是经常被引用为运算符误用的副作用用例。 - T.J. Crowder

不确定为什么底部有一个小的语法提示，但是它是不正确的。如果Javascript只有一种类型的运算符，那么说“THE ternary operator”肯定是正确的，而不是“A ternary operator”。说“在JavaScript中，这个三元运算符是A三元运算符（并且它是唯一的）”是愚蠢的，只需要使用THE就可以涵盖所有的意思了。 - Andrew

@MarkCarpenterJr 在 JavaScript 中通常使用 || 运算符来实现，因为如果左侧的值为真值，则会短路。 - Peter Olson

Answer 2

我想要添加一些内容到给定的答案中。

如果你遇到（或想要使用）三目运算符来处理“如果变量设置了就显示，否则...”这样的情况，你可以让它更短，不需要三目运算符。

---

改为：

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

您可以使用：

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

< p > < em > 这是 JavaScript 对 PHP 的简写三元运算符< code >?:的等价项

甚至可以这样说：

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

它评估变量，如果为假或未设置，则继续执行下一个操作。

- Jeffrey Roosendaal

---

我一直在苦恼三元运算符，最终找到了这个答案。谢谢！ - Ljubisa Livac

如果我在 'Hello ' + (username ? username : 'guest') 中不使用三元运算符周围的大括号，而是忽略 Hello + 并返回三元操作的结果。有人能解释一下为什么吗？ - Shiva

没有方括号时，它会评估左侧整个部分：'Hello ' + username，这始终为true，因为它是一个长度大于0的字符串。 - Jeffrey Roosendaal

Answer 3

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

例子

?: 运算符可以作为 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 文档。

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

还可以参见：

• JavaScript 三元运算符的运算优先级
• 维基百科

- Michael Robinson

---

实际上，它被称为条件运算符。 - ChaosPandion

@Michael - 这是因为它是一个三元运算符，但这不是它的正式名称。未来的JavaScript版本可能会引入一个新的三元运算符。 - ChaosPandion

这是一个三元条件运算符。 - Petah

@ChaosPandion，提供一个参考链接，否则这就是无稽之谈。 - Michael Robinson

请参阅规范文档的 11.12 条件运算符 ( ? : ) 部分：http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf。 - ChaosPandion

Answer 4

如果你只有一些符号，通过谷歌搜索可能会有一点困难 ;) 此时可以使用关键词“JavaScript条件运算符”进行搜索。

如果您在 JavaScript 中看到更多有趣的符号，应该首先尝试查找 JavaScript 的运算符： Mozilla 开发者中心的运算符列表。唯一可能遇到的例外是 $ 符号。

回答你的问题，条件运算符 可以替代简单的 if 语句。最好通过一个示例来说明：

var insurancePremium = age > 21 ? 100 : 200;

改为：

var insurancePremium;

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

- David Tang

Answer 5

大多数答案都是正确的，但我想再补充一点。 三元运算符 是右关联的，这意味着它可以像以下方式中的 链接：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; }
}

更多细节请点击这里

- Arif

---

我在这里停留，想知道是否使用链式格式会导致任何副作用，就像嵌套三元运算符一样。自从它诞生以来，似乎完全支持，不知道你是否有任何额外的信息。 - Brigo

Answer 6

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

等同于

if (x == y)
    z = 1;
else
    z = 2;

当然，除了长度更短之外。

- Ernest Friedman-Hill

Answer 7

嘿，朋友，请记住js通过评估为true或false来工作，对吧？

让我们看一下三元运算符：

questionAnswered ? "Awesome!" : "damn" ;

首先，js检查questionAnswered是true还是false。

如果是 true （？）你会得到“太棒了！”

否则（:）你会得到“糟糕”；

希望这能帮助到你的朋友 :)

- Guy Keren

Answer 8

三元运算符

在JavaScript中，我们通常使用条件语句。

例如：

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

但它包含两行或多行文本，不能分配给变量。Javascript有一个解决方案三元操作符。三元操作符可以在一行中编写并分配给一个变量。

例子：

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

这个三目运算符与C编程语言中的类似。

- Arun V Jose

Answer 9

它被称为三元运算符。

tmp = (foo==1 ? true : false);

- eagle12

---

它被称为条件运算符。它恰好是该语言中唯一的三元运算符示例。 - Lightness Races in Orbit

tmp = foo == 1 做同样的事情，所以这就足够了。 - Robert Varga

Answer 10

三元表达式在JS中非常有用，特别是在React中。以下是对提供的许多好的详细答案的简化回答。

condition ? expressionIfTrue : expressionIfFalse

把expressionIfTrue看作是if语句中的真值；
把expressionIfFalse看作是else语句。

例如：

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

这个语句检查了变量 x 的值，如果为真，则返回第一个 y=(value)，如果为假，则在冒号后返回第二个 y=(value)。

- PBrook

---

这应该是 y = (x == 1) ? x : z。 - konsumer