條件運算子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

條件 (三元) 運算子 是 JavaScript 唯一用到三個運算元的運算子:在一個條件後面會跟著一個問號 (?),如果條件是 truthy,在冒號(:)前的表達式會被執行,如果條件是 falsy,在冒號後面的表達式會被執行,這個運算子常常被用來當作 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(null));
// Expected output: "$10.00"

語法

condition ? exprIfTrue : exprIfFalse

參數

condition

值用來做為條件的表達式

exprIfTrue

如果 condition 的值是 truthy (等於或是可轉換為 true) , exprIfTrue 會被執行

exprIfFalse

如果 condition 的值是 falsy (等於或是可轉換為 false) , exprIfFalse 會被執行

描述

除了 false, 可能是 falsy 的表達式有 null, NaN, 0, 空字串 ("") 和 undefined. 如果condition 是他們其中之一 , 那麼條件表達式的結果會是 exprIfFalse 的執行結果.

一個簡單的範例:

js
var age = 26;
var beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"

一個常用來處理 null 的用法 :

js
function greeting(person) {
  var name = person ? person.name : "stranger";
  return "Howdy, " + name;
}

console.log(greeting({ name: "Alice" })); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"

條件鏈

條件 (三元) 運算子是右相依性的 (right-associative), 代表他可以以下面的方式鏈結 , 類似於 if … else if … else if … else 的鏈結方法 :

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

// Equivalent to:

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

規範

Specification
ECMAScript® 2025 Language Specification
# sec-conditional-operator

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Conditional operator (c ? t : f)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見