JavaScript 条件运算符

JavaScript 中的条件运算符首先评估表达式的真假值，然后根据评估结果执行两个给定语句中的一个。条件运算符也称为三元运算符。

JavaScript 条件（三元）运算符是唯一一个采用三个操作数的运算符——一个条件后跟一个问号 (?)，然后是如果条件为真值则执行的第一个表达式，后跟一个冒号 (:)，最后是如果条件为假值则执行的第二个表达式。

JavaScript 中有六个假值。它们是 - 0（零）、false、空字符串（'' 或 ""）、null、undefined 和 NaN。JavaScript 中所有其他值都被视为真值。

语法

以下是 JavaScript 中条件（三元）运算符的语法：

var variable = condition ? exp1 : exp2;

参数

在这里，我们解释了上述语句中的参数。

condition − 它是一个条件语句。
exp1 − 如果条件语句评估为真值，控制流将执行 exp1 表达式。
exp2 − 如果条件语句评估为假值，控制流将执行 exp2 表达式。

如果condition的值是任何假值，表达式的结果将是exp2的值；否则，它将是exp1的值。

示例

在下面的示例中，我们在条件语句中比较 num1 和 num2 变量的值。在这里，条件语句评估为真，因此 result 变量包含第一个表达式的值。

<html>
<body>
<div id="output"></div>
<script>
   var num1 = 90;
   var num2 = 67;
   var res = num1 > num2 ? "num1 is greater than num2" : "num2 is greater than num1";
   document.getElementById("output").innerHTML = res;
</script>
</body>
</html>

它将产生以下结果：

num1 is greater than num2

示例

在下面的示例中，我们根据条件语句的结果为对象属性赋值。

现在，想象一下，如果您需要编写 if-else 语句来有条件地为每个属性赋值。代码将变得复杂，但是使用三元运算符，您可以轻松地用一行代码完成。

<html>
<body>
<div id="output"></div>
<script>
   const year = 2004;
   const obj = {
	  name: "John",
	  age: year < 2005 ? "adult" : "minor",
	  city: "New York"
   };

   document.getElementById("output").innerHTML = 
   obj.name + " is " + obj.age + " and lives in " + obj.city;
</script>
</body>
</html>

它将产生以下结果：

John is adult and lives in New York

示例

此示例演示您还可以使用表达式而不是值。根据条件语句，控制流将评估第一个或第二个表达式，并将结果值赋给 'result' 变量。

<html>
<body>
<div id="output"></div>
<script>
   let operator = '-';
   let res = operator == '+' ? 10 + 20 : 10 - 20;
   document.getElementById("output").innerHTML = "The result is: " + res;
</script>
</body>
</html>

它将产生以下结果：

The result is: -10

简而言之，您可以使用三元或条件运算符来缩短使用 if-else 语句的代码。

处理 null 值

我们可以使用 JavaScript 条件运算符来处理 null 值，如果用户传递 null 值，则设置默认值。

示例

尝试以下示例：

<html>
<body>
<div id="output"></div>
<script>
   const greet = (user) => {
      const name = user? user.name : "stranger";
      return `Hello, ${name}`;
   };
   document.getElementById("output").innerHTML =
   greet({ name: "John" }) + "<br>" +
   greet(null);
</script>
</body>
</html>

它将产生以下结果：

Hello, John
Hello, stranger

打印页面