比較運算子 Comparison Operators

發表於 更新於 分類於

結合上一章的強制轉型與運算子介紹比較運算子的應用範例

我們直接從一個最簡單的例子來理解 JavaScript 中比較運算子的規則 ; 下方的例子我們可以很直覺的反應答案是 true

1
console.log(1 < 2 < 3);   // true

接著看到第二個例子

1
console.log(3 < 2 < 1);   // true

會發現答案也是 true ?，這裡我們先看一下 < 這個比較運算子的規則

規則為由左到右，而兩個相同的運算子層級相同，所以由最左邊開始，3 < 2 的結果為 false

1
console.log(false < 1);

接著，在強制轉型章節有提到，當不同型別的值進行運算時，會被強制轉型，而 false 經過轉型成數字後會是 0，true 則是 1，所以最後答案才會是 true

1
console.log(0 < 1);   // true

這時候我們回過頭看到一開始大家覺得理所當然的比較運算就會發現，雖然答案剛好和直覺相同，但運算的過程其實不一樣

1
2
3
4
5
6
7
8
// 初始狀態
console.log(1 < 2 < 3);

// 第一次運算
console.log(true < 3);

// 強制轉型後
console.log(1 < 3);   // true

常見的特別轉型結果

以下列出 JavaScript 特別的轉型結果

數字轉型

1
2
Number(undefined);   // NaN
Number(null);   // 0

== 運算子

雙等號在不同型別比較時也會進行強制轉型

1
2
3
4
1 == '1';     // true
false == 0;   // true
"" == 0;      // true
"" == false;  // true

但這裡有一個很特別的案例，在上方 null 轉型成數字時是 0，但透過 == 比較又是 false，這也被視為 JavaScript 的缺陷，因此開發時建議使用三個等號 === 避免將值強制轉型

1
null == 0;   // false

=== 運算子

這也是一般開發在進行值的比較時建議使用的方式，避免值被強制傳型出現無法預期的錯誤

1
2
3
1 == '1'     // true
1 === 1;     // true
1 === '1';   // false

!= & !== 運算子

同理 != 在比較是否不相等時會強制傳型，!== 則不會

1
2
0 != false;   // false
0 !== false;  // true

參考資料

MDN Expressions and operators
Operator+Precedence+In+Javascript
Equalty+Comparison+And+Sameness