条件 (三項) 演算子
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 では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?
)、そして条件が真値であった場合に実行する式、コロン (:
) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 if
文の代替としてよく用いられます。
試してみましょう
構文
condition ? exprIfTrue : exprIfFalse;
引数
condition
-
値が条件として使用される式です。
exprIfTrue
-
condition
が真値 (true
と等しいか、true
に変換できる値) と評価された場合に評価される式です。 exprIfFalse
-
condition
が偽値 (false
と等しいか、false
に変換できる値) と評価された場合に評価される式です。
解説
false
についていえば、偽値になる可能性がある式は null
, NaN
, 0
, 空文字列 (""
), undefined
です。 condition
がこのうちの何れかであれば、条件演算子の結果は exprIfFalse
の式を実行した結果になります。
例
単純な例
var age = 26;
var beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"
null 値の扱い
よくある使い方の一つに、 null
になる可能性がある値を扱うというものがあります。
let greeting = (person) => {
let name = person ? person.name : `お客さん`;
return `やあ、${name}`;
};
console.log(greeting({ name: `アリス` })); // "やあ、アリス"
console.log(greeting(null)); // "やあ、お客さん"
条件の連鎖
三項演算子は右結合で、すなわち以下のような方法で 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; }
}
仕様書
Specification |
---|
ECMAScript Language Specification # sec-conditional-operator |
ブラウザーの互換性
BCD tables only load in the browser