JavaScript 中的強制型別轉換
JavaScript 作為一個動態程式語言,其中的資料型別會隨著程式執行而動態改變。對於很多人來說,強制型別轉換很容易造成程式出錯,而要記住所有的轉換方式又是一件不那麼容易的事情。比如下面這張 JavaScript 真值表
型別轉換髮生在靜態型別語言的編譯階段,而強制型別轉換則發生在動態型別語言執行時。
JavaScript 提供了一系列強制型別轉換的方法
var str = String(10); // "10"
var num = Number('10'); // 10
var bool = Boolean('1'); // true
還有下面這種強制型別轉換,就不那麼明顯了
var a = 10 + ''; // "10"
接下來介紹的就是第二種強制型別轉換,只有瞭解這些轉換的規則,就能夠避免很多強制型別轉換的“坑”。
首先,我們先來了解下 == 和 === 的區別,== 和 === 都是等性操作符,而 == 表示相等,而 === 表示完全相等。== 會強制轉換兩個值的型別來比較,而 === 不會。
接下來我們來看一組比較特殊的數值,undefined 和 null,它們的名字既是型別也是值。
undefined == null; // true
undefined === null; // false
可以看到 undefined 和 null 在 == 下面會返回 true,那是因為 == 只會比較值,而不會比較其中的型別。
在 === 中,也會有特殊情況,比如 0 和 NaN。
NaN === NaN; // false
+0 === -0; // true
在 ES6 中,提供了 Object.is 方法來更好的處理兩個值相等的情況
Object.is(NaN, NaN); // true
Object.is(+0, -0); // false
除了上面的值以外,還有字串、數字、布林型之間的相等轉換規則:
- 字串與數字比較,會轉換字串為數字
- 布林型與其他型別比較,會轉換成數字
- 數字與字串與物件比較,都會轉換成物件
在下面的強制轉換中,根據 ToBoolean 規則,它會進行布林值的強制型別轉換,所以 ![] 變成了 false,而 [] == false,所以就會返回 true。
[] == ![] // true
之後再來看一個栗子
[] + {}; // "[Object Object]"
{} + [] // 0
第一行程式碼中,{} 會被當成一個值([object, Object])來處理,而 [] 會轉換為 “”。而第二行程式碼中,{} 被當做一個空的程式碼塊,而 [] 被強制轉換為了 0,所以才會出現上面這樣的情況。
在平常的習慣中,我們應該儘可能的使用 === 而不是 ==。同時,可以選擇使用 typeof 或者 ts 來避免強制型別轉換的錯誤。
感謝閱讀!