詳解基礎型別在比較時隱式型別轉換

阿新 • • 發佈：2021-10-25

比較運算子與隱式型別轉換

前言

對於廣大學習js的同學來講，學習js的難點之一就是js強大的型別轉換，js不僅提供了方法使得基礎資料型別之間可以相互轉換，而且js還會在某些情況下自己轉換資料型別這種行為稱為自動型別轉換或者隱式型別轉換。
自動轉換的情況如下（以下只是幾種場景情景，不代表所有場景）：
- isNaN(資料) 會先將資料轉換成數值型別在執行isNaN方法
- 數學運算
- 比較運算
- 邏輯運算
在這上面幾種情況中，比較運算的情況最為複雜，接下來就為大家講解比較運算子自動型別轉換的規則

基礎概念

比較運算子的種類
- > < >= <= == != === !==
比較運算之後的結果
- true
- false
轉布林型別的情況
- 0 NaN 空字串 undefined null 會轉換成 false
- 其他任何型別轉換成true

比較運算的自動型別轉換

> < >= <=大小比較

以上比較會發生兩種情況

兩個比較的資料都是字串不會自動型別轉換此時遵循字串比較規則，每一位相比，如果有字母按照ascii表值相比

    // 會將每一位相比有一位是得出結果就得到最終結果
    // 1比2小所以結果為false
    console.log('11' > '2') // false
    // 如果有字母相比
    // a的acsii碼錶值為97 b為98 所以結果是true
    console.log('a1'<'b1') // true

兩個比較的資料不全是字串此時會將資料先自動轉換成number，再比較

自動轉number採用的是Number方法
- string轉number
  - 純數字轉number相當於直接去掉引號轉型別比如 '123' -> 123
  - 非純數字轉換的結果是NaN '123abc' -> NaN
- boolean轉number
  - true --> 1
  - false --> 0
- undefined轉number結果為 NaN
- null轉number結果為 0
注： NaN和任何數比較的結果都是false

    // 右側為數值 先執行轉數值  '11'-->11  11>2
    console.log('11' > 2) // true
    // 同樣轉數值  '11a' --> NaN  NaN和任何數比較結果都是false
    console.log('11a' > 2) // false
    console.log('11a' < 2) // false
    // '11' --> 11  true-->1   11>1
    console.log('11' > true) // true
    console.log(true > false) //true
    // undefined-->NaN  null-->0   NaN和任何數比較結果都是false
    console.log(undefined>null) //false
    console.log(undefined<null) //false

== === != !==相等比較

== !=比較

字串和布林值都會先轉換成數值型別比較

    // 以下幾種情況都會先將字串和布林值轉換成數值 在比較值相等
    console.log('11' == 2) // false
    console.log(true == '1') // true
    console.log(false == '0') // true
    console.log(true == 1) // true
    console.log(false == 0) // true

NaN和任何數比較的結果都是false包括自身

undefined和null不會自動型別轉換

    // 如果此時發生轉換結果會為true但並沒有
    console.log(null == 0) // false
    console.log(undefined == NaN) // false
    // 可以理解為他們的值都為空 值相等
    console.log(undefined == null) // true