JavaScript數據類型的轉換

前言

關於JavaScript（以下簡稱js）的數據類型的轉換，我們先來看以下幾個例子。

例1：

const A = 1 + '1'
console.log(A)

例2：

const B = 1 - '1'
console.log(B)

這兩個例子的輸出結果分別是什麼？

例1的結果是：'11'（字符串）

例2的結果是：0（數字）

爲什麼？

這是因爲在加法運算時，數字與字符串相加時，數字會自動轉換爲字符串然後在相加。

而在減法運算時，數字與字符串相減時，字符串會自動轉換爲數字然後在相減。

我們在看例子

const C = +'11'
const D = -'11'
console.log(C, D)

這時會輸出什麼結果呢？

輸出結果：11, -11（全部爲數字）

爲什麼這一次又全部轉換爲數字呢？

這時因爲在一元運算時，字符串會自動轉換爲數字。

又是自動轉換，什麼是js的字自動轉換？

js的自動轉換，又名隱性轉換，就是js的值在某些情況下按照轉換規則自動進行數據類型的轉換。

在瞭解自動轉換之前，我們先要了解如何強制轉換數據類型。

強制轉換

強制轉換主要指使用Number()、String()和Boolean()三個函數，手動將各種類型的值，分別轉換成數字、字符串或者布爾值。

Number()

使用Number函數，可以將任意類型的值轉化成數值。

下面分成兩種情況討論，一種是參數是原始類型的值，另一種是參數是對象。

（1）原始類型值

原始類型值的轉換規則如下。

// 數值：轉換後還是原來的值
Number(324) // 324

// 字符串：如果可以被解析爲數值，則轉換爲相應的數值
Number('324') // 324

// 字符串：如果不可以被解析爲數值，返回 NaN
Number('324abc') // NaN

// 空字符串轉爲0
Number('') // 0

// 布爾值：true 轉成 1，false 轉成 0
Number(true) // 1
Number(false) // 0

// undefined：轉成 NaN
Number(undefined) // NaN

// null：轉成0
Number(null) // 0

基本上，只要有一個字符無法轉成數值，整個字符串就會被轉爲NaN。

（2）對象

簡單的規則是，Number方法的參數是對象時，將返回NaN，除非是包含單個數值的數組。

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

之所以會這樣，是因爲Number背後的轉換規則比較複雜。

第一步，調用對象自身的valueOf方法。如果返回原始類型的值，則直接對該值使用Number函數，不再進行後續步驟。

第二步，如果valueOf方法返回的還是對象，則改爲調用對象自身的toString方法。如果toString方法返回原始類型的值，則對該值使用Number函數，不再進行後續步驟。

第三步，如果toString方法返回的是對象，就報錯。

String()

String函數可以將任意類型的值轉化成字符串，轉換規則如下。

（1）原始類型值

• 數值：轉爲相應的字符串。
• 字符串：轉換後還是原來的值。
• 布爾值：true轉爲字符串"true"，false轉爲字符串"false"。
• undefined：轉爲字符串"undefined"。
• null：轉爲字符串"null"。

String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

（2）對象

String方法的參數如果是對象，返回一個類型字符串；如果是數組，返回該數組的字符串形式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

String方法背後的轉換規則，與Number方法基本相同，只是互換了valueOf方法和toString方法的執行順序。

1. 先調用對象自身的toString方法。如果返回原始類型的值，則對該值使用String函數，不再進行以下步驟。
2. 如果toString方法返回的是對象，再調用原對象的valueOf方法。如果valueOf方法返回原始類型的值，則對該值使用String函數，不再進行以下步驟。
3. 如果valueOf方法返回的是對象，就報錯。

Boolean()

Boolean()函數可以將任意類型的值轉爲布爾值。

它的轉換規則相對簡單：除了以下五個值的轉換結果爲false，其他的值全部爲true。

• undefined
• null
• 0（包含-0和+0）
• NaN
• ''（空字符串）

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

當然，true和false這兩個布爾值不會發生變化。

Boolean(true) // true
Boolean(false) // false

注意，所有對象（包括空對象）的轉換結果都是true，甚至連false對應的布爾對象new Boolean(false)也是true。

Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

所有對象的布爾值都是true，這是因爲 js語言設計的時候，出於性能的考慮，如果對象需要計算才能得到布爾值，對於obj1 && obj2這樣的場景，可能會需要較多的計算。爲了保證性能，就統一規定，對象的布爾值爲true。

自動轉換

下面介紹自動轉換，它是以強制轉換爲基礎的。

遇到以下三種情況時，js會自動轉換數據類型，即轉換是自動完成的，用戶不可見。

第一種情況，不同類型的數據互相運算。

123 + 'abc' // "123abc"
123 - 'abc' // NaN
123 - '23' // 100 

第二種情況，對非布爾值類型的數據求布爾值。

if ('abc') {
  console.log('hello')
}  // "hello"

第三種情況，對非數值類型的值使用一元運算符（即+和-）。

+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN

自動轉換的規則是這樣的：預期什麼類型的值，就調用該類型的轉換函數。

比如，某個位置預期爲字符串，就調用String()函數進行轉換。如果該位置即可以是字符串，也可能是數值，那麼默認轉爲數值。

由於自動轉換具有不確定性，而且不易除錯，建議在預期爲布爾值、數值、字符串的地方，全部使用Boolean、Number和String函數進行顯式轉換。

自動轉換爲布爾值

js遇到預期爲布爾值的地方（比如if語句的條件部分），就會將非布爾值的參數自動轉換爲布爾值。系統內部會自動調用Boolean()函數。

以下幾種情況下，js會自動中爲布爾值

• if語句的條件

  if (11) {console.log('true')} // true
  if (null) {console.log('true')} else {console.log('false')} // false
  

• 三元表達式

  11 ? console.log('true') : console.log('false') // true
  null ?  console.log('true') : console.log('false') // false
  

• 邏輯非

  !11 // false
  !null // true
  !!11 // true
  !!null // false
  

另外，除了以下五個值，其他都是自動轉爲true。

• undefined
• null
• +0或-0
• NaN
• ''（空字符串）

下面這個例子中，條件部分的每個值都相當於false，使用否定運算符後，就變成了true。

if ( !undefined
  && !null
  && !0
  && !NaN
  && !''
) {
  console.log('true');
} // true

自動轉換爲字符串

js遇到預期爲字符串的地方，就會將非字符串的值自動轉爲字符串。具體規則是，先將複合類型的值轉爲原始類型的值，再將原始類型的值轉爲字符串。

字符串的自動轉換，主要發生在字符串的加法運算時。當一個值爲字符串，另一個值爲非字符串，則後者轉爲字符串。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

這種自動轉換很容易出錯。

var obj = {
  width: '100'
};

obj.width + 20 // "10020"

上面代碼中，開發者可能期望返回120，但是由於自動轉換，實際上返回了一個字符10020。

自動轉換爲數值

js遇到預期爲數值的地方，就會將參數值自動轉換爲數值。系統內部會自動調用Number函數。

除了加法運算符（+）有可能把運算子轉爲字符串，其他運算符都會把運算子自動轉成數值。

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

上面代碼中，運算符兩側的運算子，都被轉成了數值。

注意：null轉爲數值時爲0，而undefined轉爲數值時爲NaN。

一元運算符也會把運算子轉成數值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0