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

列印頁面