不再用擔憂 JavaScript 的數據類型轉換了

JavaScript 是一種 弱類型或者說 動態類型語言。因此你不用提早聲明變量的類型，在程序運行時，類型會被自動肯定，你也可使用同一個變量保存不一樣類型的數據。

<!-- more -->

數據類型

原始類型

在 JS 中一共 6 種原始類型：

• string
• number
• boolean
• undefined
• null
• symbol (ECMAScript 6)

對象類型

除了原始類型其餘的都是對象類型（object）了。

內存空間

在 JS 中，每個數據都須要存放在內存空間中。

原始類型數據直接存儲在 棧內存(stack) 中，對象數據存儲在 堆內存(heap) 中，並在 棧內存 中存放了該對象數據在 堆內存的地址(引用)。

var a1 = 0  // 棧
var a2 = 'this is string'  // 棧
var a3 = null  // 棧

var b = { m: 20 }  // 堆
var c = [1,2,3]  // 堆

上述變量的內存圖解：

typeof 與 instanceof

typeof 是否能正確判斷類型？instanceof 能正確判斷對象的原理是什麼？

typeof

typeof 運算符返回一個字符串，表示未經計算的操做數的類型。

• 對於原始類型，除了 null 類型都顯示正確類型。

typeof '1'  // 'string'
typeof true // 'boolean'
typeof 1    // 'number'
typeof undefined  // 'undefined'
typeof Symbol()  // 'symbol'

typeof null // 'object' 這是一個 Bug 

typeof 1 === 'number'  // true
typeof (typeof 1) === 'string'  // true

• 對於對象來講，除了函數都會顯示 object 。

typeof []   // 'object'
typeof {}   // 'object'
typeof console.log  // `function`

instanceof

instanceof 運算符返回一個布爾值，用於測試構造函數的 prototype 屬性是否存在於對象 原型鏈上。因此在判斷對象的正確類型時能夠考慮使用 instanceof 。

// 定義構造函數
function A() {}
function B() {}

var a = new A()
var b = new B()

a instanceof A  // true ，由於 Object.getPrototypeOf(a) === a.prototype

a instanceof B  // false ，B.prototype 不在 a 的原型鏈上

類型轉換

任意數據類型之間能夠相互轉換，可是 symbol 特殊。symbol 類型只能轉換成 string 類型，其餘的轉換會報錯。

強制轉換

Number()

• 原始類型 ---> 數字

// 1. 字符串 ---> 數字
  
    // 1) 能夠被解析成數值的字符串 返回 數值
    Number('123')  // 123
    // 2) 不能解析成數值的字符串 返回 NaN
    Number('123aaa')  // NaN
    // 3) 空串 ---> 0
    Number('')  // 0

// 2. 布爾值 ---> 數字

    // 1) true ---> 1
    Number(true)  // 1
    // 2) false ---> 0
    Number(false)  // 0

// 3. undefined ---> NaN
    Number(undefined)  // NaN
    
// 4. null ---> 0
Number(null)  // 0

在瀏覽器環境中，window.parseInt() 和 window.parseFloat() 能夠將一些字符串轉換成數字,但沒 Number() 嚴格 。把其餘原始類型都會轉換成 NaN 。

parseInt('123aaa')  // 123
parseFloat('1.23aaa')  // 1.23
parseInt(true)  // NaN

• 對象 ---> 數字

Number() 方法的參數是對象時，通常狀況下，除非是包含單個數字的數組會返回數字，不然返回 NaN 。

Number({a: 1})  // NaN
Number([1,2])   // NaN
Number([1])     // 1

在執行 Number(對象) 方法時，會先進行參數處理，將對象轉換成原始類型，再進行轉換成數字的操做。

1. 第一步，調用對象自身的 valueOf() 方法（ var a = new String(123); a.valueOf() --> '123' ）。若是返回的值是原始類型，則直接將該值轉換成數字並返回。再也不進行後續步驟。
2. 第二步，若是 valueOf() 方法返回的是對象，則調用原對象自身的 toString() 方法，若是此時返回的值是原始類型，則將該值轉換成數字並返回，再也不進行後續操做。
3. 若是 toString() 方法返回的仍是對象，就報錯。

Number({a: 1})  // NaN
// 過程以下：
var t = {a: 1}
// 第一步
t.valueOf()  // {a: 1}
// 第二步
t.toString() // '[object Object]'
Number('[object Object]')  // NaN
    
Number([1,2])
//過程以下：
// 第一步
[1,2].valueOf()   // [1,2]
// 第二步
[1].toString()  // '1,2'
Number('1,2')     // NaN
    
// 再來看看參數是單個數字的數組時的狀況
    
Number([1])  // 1
    
//過程以下：
// 第一步
[1].valueOf()   // [1]
// 第二步
[1].toString()  // '1'
Number('1')     // 1

String()

String() 函數能夠將任意類型的值轉換成字符串。

• 原始類型 ---> 字符串

var a = Symbol({})
String(a)  // 'Symbol([object Object])'

String(Symbol([]))  // 'Symbol()'

• 對象 ---> 字符串

數組會返回該數組的字符串形式，函數返回完整函數的字符串，其餘的返回一個類型字符串。

String([1,2])  // '1,2'
String([])  // ''

function foo(x){ return x*x }
String(foo)  //  'function foo(x){ return x*x }'

String({a: 1})  // '[object Object]'

String(對象) 方法的轉換規則與 Number(對象) 基本相同，只是互換了 valueOf() 與 toString() 的執行順序。

1. 先調用對象的 toString() 方法。若是返回的值是原始類型，則將該值轉換成字符串並返回。再也不執行如下步驟。
2. 若是 toString() 返回的是對象，則調用原對象的 valueOf() 方法。若是返回的值是原始類型，將該值轉換成字符串並返回。再也不執行後續操做。
3. 若是 valueOf() 方法返回的仍是對象，就報錯。

自定義對象的 toString() 方法和 valueOf() 方法：

var obj = {
    valueOf: function() {
        return 1
    },
    toString: function() {
        return 2
    }
}

String(obj)  // '2'
Number(obj)  // 1

Boolean()

Boolean() 函數能夠將任意類型轉換成布爾值
除了如下五個值轉換結果爲 false ，其餘值所有轉換爲 true

• undefined
• null
• '' (空字符串)
• -0 或 0
• NaN

!!數據 與 Boolean(數據) 效果同樣。

Boolean(undefined)  // false
Boolean(null)  // false
Boolean('')  // false
Boolean(0)  // false
Boolean(NaN)  // false

! NaN  // true
!! NaN  // false

自動轉換

自動轉換就是沒有顯式地使用函數對數據進行類型轉換。但它是以強制轉換爲基礎的。

當預期數值與實際數值不匹配時，JavaScript 就會自動調用預期類型的轉換函數對實際值進行轉換。

進行算術運算

• 運算子都是原始類型

  • 在加法運算中 只要一方時字符串，另外一方就會轉換成字符串。這是字符串拼接。
  • 其餘 - * / ** % ++ -- +(一元運算符 表示正數) -(一元運算符 表負數) 都會將運算子轉換成數字。

1 + '1'  // '11'
2 * '3'  // 6
1 - 'a'  // NaN  
3 + - '1'  // 2

• 運算子是對象

會先把對象轉換成原始類型再按預期值轉換。具體方法是：先調用對象的 valueOf() 方法試圖將對象轉換成原始類型，若是返回的是對象，就再調用原對象的 toString() 方法，若是返回的仍是對象就報錯。

var obj = {
    valueOf: function() {
        return '1'
    },
    toString: function() {
        return '10'
    }
}

10 - obj  // 9

1 + [1,2]  // '11,2'
// [1,2].toString() ---> '1,2'

進行比較運算

• === 和 !== 不會發生類型轉換，只要類型不一樣就返回 false.
• 兩邊同時爲字符串會比較 Unicode 碼，不然都會轉換成數字進行比較(null、undefined 除外)。
• NaN 與任意值(包括自己NaN)比較都返回 false
• null undefined 除了 null(undefined) == undefined(null) 返回 true，其餘 > < == 有 null 或 undefined 參與的都返回 false 。

'abc' > 'abd'  // false
true > false  // true  ---> Number(true) > Number(false)
true > '-1'  // true  ---> Number(true) > Number('-1')

var obj = {valueOf: function() {return '1'}}
[3] > obj  // true
// 過程以下：
// Number([3]) > Number(obj)
// Number('3') > Number('1')
// 3 > 1

0 == null  // false

== 經常使用於判斷函數的參數是否等於 null 或者 undefined ，由於 null == undefinded 返回 true

function fun(x) {
    if(x == null) {···}
}

邏輯運算

• !參數
• 參數&&
• 參數||
• 參數? :(三元運算符)
• if(參數)

都會將非布爾的參數轉換成布爾類型(使用 Boolean(參數) 函數)。

---

閱讀原文

參考資料：

https://wangdoc.com/javascript/features/conversion.html

https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc715f6fb9a049c15ea4e0

https://juejin.im/entry/589c29a9b123db16a3c18adf