1. 程式人生 > >JavaScript 中的強制型別轉換

JavaScript 中的強制型別轉換

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

除了上面的值以外,還有字串、數字、布林型之間的相等轉換規則:

  1. 字串與數字比較,會轉換字串為數字
  2. 布林型與其他型別比較,會轉換成數字
  3. 數字與字串與物件比較,都會轉換成物件

在下面的強制轉換中,根據 ToBoolean 規則,它會進行布林值的強制型別轉換,所以 ![] 變成了 false,而 [] == false,所以就會返回 true。

[] == ![]  // true

之後再來看一個栗子

[] + {};  // "[Object Object]"
{} + []  // 0

第一行程式碼中,{} 會被當成一個值([object, Object])來處理,而 [] 會轉換為 “”。而第二行程式碼中,{} 被當做一個空的程式碼塊,而 [] 被強制轉換為了 0,所以才會出現上面這樣的情況。

在平常的習慣中,我們應該儘可能的使用 === 而不是 ==。同時,可以選擇使用 typeof 或者 ts 來避免強制型別轉換的錯誤。

感謝閱讀!