資料型別轉換

一、其他資料型別 => Number型別

1、特定轉換為Number

• Number()
• parseInt()/parseFloat()

2、隱式轉換

瀏覽器內部先轉換為Number後進行運算處理

• isNaN()

• 數學運算

  如 1+2，990 + 8

  特殊情況：加號兩邊都有內容，當加號一側出現字串時，此時就不是數學運算了，而是字串拼接

• 在處理 == 比較時，部分值需要轉化為數字後再進行比較（下面會提到）

• …

Number('') // => 0
Number('1') // => 1
Number('1x') // => NaN 只要出現非有效數字，結果都是NaN
Number(true) // => 1
Number(false) // => 0
Number(null) // => 0
Number(undefined) // => NaN
Number(Symbol(1)) // 報錯：Uncaught TypeError: Cannot convert a Symbol value to a number
Number(BigInt(1)) // 1
Number({}) // NaN: 先valueOf，沒有原始值，就toString變為字串，最後再把字串轉換為數字
// [] => [] => '[object Object]' => NaN

parseInt

parseInt詳解

// parseInt(string, radix)  解析一個字串並返回指定基數的十進位制整數， radix 是2-36之間的整數，表示被解析字串的基數。
// 
// 機制：把轉換的值先轉換為字串，從字串的左側第一個字元開始，查詢有效數字字元，遇到非有效數字字元時，停止查詢，不論後面是否還有有效數字，都停止查詢。把找到的有效數字字元轉換為數字。
// 如果一個都沒找到，則結果為 NaN
// 例：
[10.18, 0, 10, 25, 23].map(parseInt) // => [10, NaN, 2, 2, 11]
// => [10.18, 0, 10, 25, 23].map((item, index) => parseInt(item, index))
// => parseInt(10.18, 0) => 10
// => parseInt(0, 1) => NaN
// => parseInt(10, 2) => 2
// => parseInt(25, 3) => 2
// => parseInt(23, 4) => 11

parseFloat

// 比 parseInt 多識別一個小數點

// 示例：
parseInt('') // => NaN
Number('') // => 0
isNaN('') // => false ( isNaN('') => isNaN(Number('')) => isNaN(0) => false )
parseInt(null) // => NaN ( parseInt(null) => parseInt('null') )
Number(null) // => 0
isNaN(null) // => false
parseInt('1a') // => 1
Number('1a') // => NaN
isNaN('1a') // => true

parseFloat('1.6a') + parseInt('1.6a') + typeof parseInt(null) // => '2.6Number'
// => 1.6 + 1 + typeof NaN => 2.6 + 'Number' => '2.6Number'

isNaN(Number(!!Number(parseInt('0.8')))) // => false
// => isNaN(Number(!!Number(0))) => isNaN(Number(!!0)) => isNaN(Number(false)) => isNaN(0) => false

typeOf !parseInt(null) + !isNaN(null) // => 'booleantrue'
// => typeof !NaN + !isNaN(0) => typeof true + !false => 'boolean' + true => 'booleantrue'

10 + false + undefined + [] + 'aaa' + null + true + {}
// => 10 + Number(false) + undefined + [] + 'aaa' + null + true + {}
// => 10 + 0 + undefined + [] + 'aaa' + null + true + {}
// => 10 + undefined + [] + 'aaa' + null + true + {}
// => 10 + Number(undefined) + [] + 'aaa' + null + true + {}
// => 10 + NaN + [] + 'aaa' + null + true + {}
// => NaN + [] + 'aaa' + null + true + {}
// => NaN + [].toString() + 'aaa' + null + true + {}
// => NaN + '' + 'aaa' + null + true + {}
// => 'NaN' + 'aaa' + null + true + {}
// => 'NaNaaa' + null + true + {}
// => 'NaNaaa' + 'null' + true + {}
// => 'NaNaaanull' + true + {}
// => 'NaNaaanull' + 'true' + {}
// => 'NaNaaanulltrue' + {}
// => 'NaNaaanulltrue' + ({}).toString()
// => 'NaNaaanulltrue' + '[object Object]'
// => 'NaNaaanulltrue[object Object]'

其他

// 加號一側出現字串不一定是字串拼接，如
i++/++i/+i
// ++('1') => 2

// 程式碼塊識別
{} + 0 // => 0: 左邊的{}認為是一個程式碼塊，不參與運算，只處理 +0 （function fn() {} + 0）

({}+0) // => '[object Object]0': 參與到數學計算中
0 + {} // => '0[object Object]': 參與到數學計算中

二、其他資料型別 => 字串

1、可使用轉換為字串的方法

• String()
• toString()

2、隱式轉換

一般情況下都是呼叫toString

• 在加號運算的時候，如果一側出現字串的時候，處理為字串拼接
• 把物件轉換為數字的時候，會先toString()轉換為字串，再去轉換為數字
• alert/confirm/prompt/document.write…這些方式在輸出內容的時候，會把內容轉化為字串，然後再輸出
• …

…

// {} 普通物件 調取toString是調取的Object.prototype.toString，不是轉換為字串，而是檢測資料型別，結果是'[object Object]'
// 其他值 轉換為字串時，一般直接使用 '' 包起來

三、其他資料型別 => 布林型別

1、可使用轉換為布林型別的方法

• ! => 轉換為布林型別後取反
• !! => 轉換為布林型別
• Boolean()

2、隱式轉換

• 在條件判斷中，條件處理的結果就是布林型別
• …

規則：只有" 0, NaN, null, undefined, '' " 這五個值會變為布林的 false，其餘的都是 true

---

== 比較過程中的轉換規則

資料型別相同

• {} == {}：false （物件比較的是堆記憶體的地址，地址不同）
• [] == [] : false （物件比較的是堆記憶體的地址，地址不同）
• NaN == NaN: false

資料型別不同

• null == undefined: true

  如果換成 === ，則為false，他們的型別不同

  其餘的 null/undefined 和其他任何資料型別的值都不相等

• 字串 == 物件：要把物件轉換為字串後再作比較

• 其他的，如果 == 兩邊型別不一致，則需要轉換為數字後再進行比較

// 一、
[] == false // true
/**
 * 物件 == 布林型別
 * 1、兩邊轉換為數字
 * 2、物件轉換為數字：先基於valueOf獲得原始值，沒有原始值，再去toString，然後再轉換為數字
 *    [] => [] => '' => 0
 *    false => 0
 */
// 二、
![] == false // true
/**
 * ![] => 先把陣列轉化為布林型別，然後取反 => !true => false
 * false == false => true
 */