JS 中的數據類型轉換

轉成字符串 String

1. 使用 toString方法

這種方法能夠將 number, boolean, object，array,function 轉化爲字符串，可是沒法轉換 null, undefined 這兩種數據類型。

(1).toString() // "1"

true.toString() // "true"

var obj = {}
obj.toString() // "[object Object]"

null.toString() // Uncaught TypeError: Cannot read property 'toString' of null

undefined.toString() // Uncaught TypeError: Cannot read property 'toString' of undefined

// 數組
[1, 2, 3].toString() // "1, 2, 3"

// 函數
var fn1 = function(){console.log('hello')}
fn1.toString()  // "function(){console.log('hello')}"

2. 使用 String() 函數

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

原始類型值轉換：

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

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

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

String方法背後的轉換規則：

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

3. 鏈接一個空字符串 （推薦）

1000 + ''     // "1000"

null + ''     // "null"

undefined + '' // "undefined"

true + ''      // "true"

obj + ''       // "[object Object]"

[1,2,3] +  ''  // "1,2,3"

轉成數字 Number

1. 使用 Number() 函數

// 數值：轉換後仍是原來的值
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

Number({}) // NaN

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

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

Number 背後的轉換規則

1. 調用對象自身的valueOf方法。若是返回原始類型的值，則直接對該值使用Number函數，再也不進行後續步驟。

2. 若是valueOf方法返回的仍是對象，則改成調用對象自身的toString方法。若是toString方法返回原始類型的值，則對該值使用Number函數，再也不進行後續步驟。

3. 若是toString方法返回的是對象，就報錯。

舉個例子：

var obj = {x: 1};
Number(obj) // NaN

// 等同於
if (typeof obj.valueOf() === 'object') {
  Number(obj.toString());
} else {
  Number(obj.valueOf());
}

2. 使用 parseInt() 函數

parseInt() 函數解析一個字符串參數，並返回一個指定進制的整數

// 語法，第二個參數是數值的進制，數值範圍是2 - 36之間
parseInt(string, radix);

parseInt('123') // 123
parseInt('   81') // 81
parseInt(1.23) // 1
parseInt('15px') // 15
parseInt('011') // 11
parseInt('1e+21') // 1

// 進制轉換
parseInt(021, 8); // 15，按8進制轉換
parseInt("0xF", 16); //15, 按16進制轉換
parseInt("1111", 2); //15, 按2進制轉換

parseInt轉換規則：MDN parseInt ， 阮一峯教程-數值

• 若是字符串頭部有空格，空格會被自動去除。

• 若是parseInt的參數不是字符串，則會先轉爲字符串再轉換。

• 字符串轉爲整數的時候，是一個個字符依次轉換，若是遇到不能轉爲數字的字符，就再也不進行下去，返回已經轉好的部分。

• 若是字符串的第一個字符不能轉化爲數字（後面跟着數字的正負號除外），返回NaN。

• 若是字符串以0x或0X開頭，parseInt會將其按照十六進制數解析。

• 若是字符串以0開頭，將其按照10進制解析。

• 對於那些會自動轉爲科學計數法的數字，parseInt會將科學計數法的表示方法視爲字符串，所以致使一些奇怪的結果。

  • parseInt(1000000000000000000000.5) // 1
    // 等同於
    parseInt('1e+21') // 1
    
    parseInt(0.0000008) // 8
    // 等同於
    parseInt('8e-7') // 8

3. 使用 parseFloat() 函數

parseFloat方法用於將一個字符串轉爲浮點數。

parseFloat('3.14') // 3.14

// 若是字符串符合科學計數法，則會進行相應的轉換。
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

// 若是字符串包含不能轉爲浮點數的字符，則再也不進行日後轉換，返回已經轉好的部分
parseFloat('3.14more non-digit characters') // 3.14

// parseFloat方法會自動過濾字符串前導的空格
parseFloat('\t\v\r12.34\n ') // 12.34

// 若是參數不是字符串，或者字符串的第一個字符不能轉化爲浮點數，則返回NaN。
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

阮一峯教程-parseFloat

4. 減零 x - 0

這是一種最簡單快捷的方法，字符串減去一個0能夠轉換成數字

'1' - 0 // 1

'a' - 0 // NaN

'01AB' - 0 // NaN

5. 取正 + x

+ '1' // 1
+ '-1' // -1
+ 's' // NaN
+ '1s' // NaN
+ obj // NaN

轉成布爾類型 Boolean

除了值是 null, undefined, 0, NaN, ''（空字符串） 轉成 false 外，其它的所有都是 true。

1. 使用 Boolean()函數

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

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

2. 使用 !! 連續兩次取反 （推薦）

!!1 // true

!!null // false

!!undefined // false

!!obj // true

!!'s' // true