六角學院 JS 核心筆記 (十六)【運算子、型別與文法】- 寬鬆相等、嚴格相等以及隱含轉型

AdSense

前言

JavaScript 是弱型別的語言，容忍隱性的型別轉換，因此允許不同型別之間的比對 (包含 =、>、<)。

寬鬆相等 == 比對兩者型別轉換後的值、嚴格相等 === 比對兩者的型別和值。

嚴格相等

比對型別和值。

1 和 "1" 、NaN 和 "NaN" 型別不一樣，比對結果都是false。
NaN 表示 Not A Number 不是一個數字。不管嚴格還是寬鬆比對，都是 false。
+0 和 -0 雖然值不一樣。不管嚴格還是寬鬆比對，都是 true。

console.log(1 === "1");        // false
console.log(1 !== "1");        // true
console.log(NaN === "NaN");    // false

// ** 特別注意 **
console.log(NaN === NaN);      // false
console.log(+0 === -0);        // true

寬鬆相等

可以想成是，不同型別的比對，會先將兩邊隱性地轉換成相同型別，也就是利用包裹物件。看以下範例。

Boolean 和 String 與其他型別做比較

Boolean 和 String 與其他型別做比較時，會自動加上包裹物件 Number()，將其型別轉換為 Number。

我們可以使用 Number() 包裹型別做檢測，測試兩邊的值為何。
下面程式碼第四行，true 加上包裹物件 Number(true) 會被轉換為 1，而 "true" 加上包裹物件 Number("true") 會被轉換為 NaN，1 和 NaN 不相等，結果為false。

console.log(1 == "1");        // true
console.log(17 == "0x11");    // true

console.log(true == "true");  // false
Number(true);    // 回傳 1
Number("true");  // 回傳 NaN

注意：null 的型別是 Null ，而 undefined 的型別是 Undefined，它們在跟 Boolean 和 String 比較時，不會自動加上包裹物件 Number() 轉換型別。但是，null 和 undefined 在寬鬆相等時，比較結果是 true。

console.log(null == 0);            // false，即使 Number(null) 回傳 0
console.log(null == undefined);    // true

物件與非物件做比較

物件與非物件做比較時，會自動使用非物件方的包裹物件轉換。

// 1. 物件與 Number
console.log([10] == 10); // true
Number([10]);    // 回傳 10

// 2. 物件與 String
console.log(["A"] == "A"); // true
String(["A"]);   // 回傳 "A"

// 3. 物件與 BigInt
let a = new Object('1234'); // 回傳 String {'1234'}, typeof is 'object'
let b = BigInt(1234); // 回傳 1234n, typeof is 'bigint'

console.log(a == b); // true
BigInt(a); // 回傳 1234n

注意：{} 在作轉換時，會使用 String() 包裹物件。

String({test: "A"});   // 回傳 "[object Object]"

物件與物件做比較

因為型別相同，不需要利用包裹物件作轉換。而物件的變數是儲存物件的記憶體位址，如果記憶體位址相同，則不管嚴格還是寬鬆比對，結果都為 true。

console.log({} == {});  // false
console.log([] == []);  // false

let a = [];
let b = a;
console.log(b == a);    // true

詳細請參考：
JavaScript 物件深入淺出重點整理

補充資料

有兩個寬鬆相等、嚴格相等比較結果的表格，可以參考看看：

1. JavaScript Equality Table - == 和 === 頁籤。if() 頁籤是關於下一章節：六角學院 JS 核心筆記 (十七)【運算子、型別與文法】- Truthy 與 Falsy
2. Oh My Dear JavaScript - 上方 Relational and Equality Operators。下方 What goes through If statement 也是關於下一章節。

參考資料：
六角學院：JavaScript 核心篇 - 邁向達人之路