条件（三項）演算子
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
条件（三項）演算子は JavaScript では唯一の、 3 つのオペランドをとる演算子です。
条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。
この演算子は、 if...else 文の代替としてよく用いられます。
試してみましょう
function getFee(isMember) {
return isMember ? "$2.00" : "$10.00";
}
console.log(getFee(true));
// 予想される結果: "$2.00"
console.log(getFee(false));
// 予想される結果: "$10.00"
console.log(getFee(null));
// 予想される結果: "$10.00"
構文
js
condition ? exprIfTrue : exprIfFalse
引数
condition-
値が条件として使用される式です。
exprIfTrue-
conditionが真値 (trueと等しいか、trueに変換できる値) と評価された場合に評価される式です。 exprIfFalse-
conditionが偽値 (falseと等しいか、falseに変換できる値) と評価された場合に評価される式です。
解説
false についていえば、偽値になる可能性がある式は null, NaN, 0, 空文字列 (""), undefined です。 condition がこのうちの何れかであれば、条件演算子の結果は exprIfFalse の式を実行した結果になります。
例
キホンテキナ例
js
const age = 26;
const beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"
null 値の扱い
よくある使い方の一つに、 null になる可能性がある値を扱うというものがあります。
js
const greeting = (person) => {
const name = person ? person.name : "お客さん";
return `やあ、${name}`;
};
console.log(greeting({ name: "アリス" })); // "やあ、アリス"
console.log(greeting(null)); // "やあ、お客さん"
条件の連鎖
三項演算子は右結合なので、以下のような方法で if … else if … else if … else の連鎖と同様に「連鎖」させることができます。
js
function example() {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
これは次の if...else の連鎖と同じです。
js
function example() {
if (condition1) {
return value1;
} else if (condition2) {
return value2;
} else if (condition3) {
return value3;
} else {
return value4;
}
}
仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-conditional-operator |
ブラウザーの互換性
Loading…