一文带你了解JavaScript的隐式类型转换

在了解隐式类型转换之前，你需要知道JavaScript的数据类型、数据类型之间的相互转换（强制/显示类型转换）。

JavaScript的数据类型

在JS中，数据类型可以分为：

• 简单数据类型（Number、String、Boolean、undefined、null）
• 复杂数据类型(Function、Obiect、Array)

JavaScript的显示转换

一般数据类型转换，通常指的是"简单数据类型"之间的相互转换。
以下的这种转换也叫"显示转换"、"强制转换"。

• 其他 转 Number
• 其他 转 String
• 其他 转 Boolean

其他转Number

语法：Number() parseInt() parseFloat()

• String ==> Number

// 说明：Number() 用于其他任意数据类型，parseInt()、parseFloat() 一般用于纯数字字符串
// 1 纯数字字符串
var str1 = '1234567'  // 字符串类型
Number(str1)  // 1234567 数值类型
 
// 2 非纯数字字符串 [记住结果是NaN]
var str2 = '1234567abcd'
Number(str2)  // NaN (not a number) 但却是数值类型
 
// 3 纯数字的带小数点的字符串  parseInt()、parseFloat()
var str3 = '123456.789'
Number(str3)  // 123456.789  数值类型
parseInt(str3)  // 123456  仅保留整数部分，数值类型
parseFloat(str3)  // 123456.789  即保留整数部分，也保留小数部分，数值类型

• Boolean ==> Number

// Boolean 值有两种：true  false
var b1 = true
var b2 = false
Number(b1)  // 1
Number(b2)  // 0
// 若布尔值结果为 true会转为1，false会转为0

• undefined ==> Number

var num  // 声明一个变量未赋值，结果是undefined
Number(num)  // NaN  [记住这种特殊情况]

• null ==> Number

// null 表示空 也就是没有
var m = null
Number(m)  // 0

其他转String

语法：String() toString()

• Number ==> String

// 直接转为纯数字字符串 String()
var num1 = 1234567
var num2 = 1234567.89
String(num1)  // '1234567'  字符串类型
String(num2)  // '1234567.89'  字符串类型
 
// 转为xx进制的字符串  toString(几进制)
// 转为二进制
num1.toString(2)  //  100101101011010000111
num1.toString(2)  //  100101101011010000111.11100011110101110000101000111101
 
// 转为十六进制
num1.toString(16)  // 12d687
num2.toString(16)  // 12d687.e3d70a3d

• Boolean ==> String

// 布尔值两种均可使用，但不会转为xx进制
var b1 = true
var b2 = false
String(b1)     // "true"
b2.toString()  // "false"

• undefined ==> String

// 只能使用 String()
var n  // 变量定义未赋值，结果是undefined
String(n)  // "undefined"

• Null ==> String

// 只能使用 String()
var n = null // 将变量赋值为null 代表为空
String(n)  // "null"

其他转Boolean

语法：Boolean()

• Number ==> Boolean

// 数字0
var num1 = 0
Boolean(num1)  // false
 
// NaN
var n
var num2 = Number(n)  // NaN
Boolean(num2)  // false
 
// 其他数字
var num3 = 123.456
Boolean(num3) // true

• String ==> Boolean

var str1 = ""  // 空字符串
var str2 = "hell0 world"  // 非空字符串
Boolean(str1)  // false  
Boolean(str2)  // true

• undefined ==> Boolean

var m
Boolean(m) // false

• Null ==> Boolean

var m = null
Boolean(m) // false

JavaScript的隐式转换

隐式转换一般会发生在JavaScript的运算时，所以在了解之前，你需要知道关于运算符的相关知识。

在JS中运算符一般分为：

• 一元运算符
• 二元运算符，隐式转换一般发生在二元运算符中
• 三元运算符

一元运算符

一般也叫自增自减运算符，如：i++ i--，也分为前、后自增/自减

• 前自增/自减：++i --i
• 后自增/自减：i++ i--
• 区别：前者是先自增/自减，再使用；后者是先使用，再自增/自减

/*
    i++ 相当于 i = i+1
    在运算时，有几个值需要关注
      + i自身的值
      + i++后的变化(表达式的值)
      + 当前项的值
*/
举个例子：
var b = -3
console.log(--b + b-- + b++ + b + --b + ++b);  // -26
 
表达式：    --b + b-- + b++ + b + --b + ++b
b的值：     -3    -4     -5
表达式的值：-4     -5
当前项的值：
 
总结：
  + 最后运算求和，使用的是当前项的值累加
  + 前置时，当前项的值 = 表达式的值
  + 后置时，当前项的值 = b的值
 
分析：
/*
    起初，b的值是-3
    --b  先自减，再使用    当前项的值为：-4  表达式的值：-4  运算后b的值：-4
                          
    b--  先使用，再自减    当前项的值为：-4  表达式的值：-5  运算后b的值：-5
                          
    b++  先使用，再自增    当前项的值为：-5  表达式的值：-4  运算后b的值：-4    
                          
    b    直接使用         当前项的值为：-4  表达式的值：-4  运算后b的值：-4                      
                          
    --b  先自减，再使用   当前项的值为：-5  表达式的值：-5  运算后b的值：-5
                          
    ++b  先自增，再使用   当前项的值为：-4  表达式的值：-4  运算后b的值：-4
 
                    
    结果是当前项的值相加：-4 + -4 + -5 + -4 + -5 +-4 = -26
*/
 
试试看：
var a = 5
console.log(++a + a++ + a-- + a + a-- + --a);  // 35

二元运算符

二元运算符有：数学运算符、赋值预算符、比较运算符、逻辑运算符
在进行运算时，会发生隐私类型转换

• 数学运算符 + - * / %
• 赋值预算符 = += -= *= /= %=
• 比较运算符 > < >= <= != !== == ===
• 逻辑运算符 && || ！

数学运算符

// 数学运算符也叫算数运算符，因此都需要转为Number才能计算
 
/*
  加法 [需要特别注意] 
  如果等式两边有一个为字符串，那么会发生隐式类型转换
  将另一边也转为String类型，然后拼接，最后得到一个拼接后的字符串
 
  其他数学运算符，均是将等式两边先转为Number类型，然后再计算
*/
  var a = 1
  var b = '2'
  var c = a+b  // 结果是 "12"

赋值运算符

在JS中，一个等号表示赋值，两个等号才表示等于

// 赋值运算符有：=  +=  -=  *=  /=  %=
var a = 10
var b = a  // 相当于是将a的值复制以一份给b  打印a、b的结果都是10
 
var a += m  // 相当于 a = a+m  -=  *=  /=  %=类似，不再赘述

比较运算符

比较运算实际比较的是：两个变量的值，返回结果是布尔值

// 比较运算符有：  >  <  >=  <=  !=  !==  ==  ===
 
/*
  简单数据类型的比较，比较的是变量的大小/值
      所以会发生隐式类型转换，转为Number
 
  复制数据类型的比较，比较的是两个变量保存的地址
      而不是具体变量的内容，即使长得一样，后面有机会写个相应的文章
*/
var a = 10
var b = 20
var c = a > b  // false
 
var m = 100
var n = "100"  // 会隐式转换，将String转为Number
console.log(m==n)  // true
 
 
/*
  [经典问题]  == 与 === 的区别？
            * == 比较的是值（等于）
            * === 比较值与类型（全等/恒等）
*/
举个例子：
var a = 20
var b = 20
console.log(a==b)   //  比较值：两个值都是20 true
console.log(a===b)  //  比较值与类型：类型都是Number 且 值都是20  true
 
var m = 100
var n = "100"  // 会隐式转换，将String转为Number
console.log(m==n)   // 比较值：两个值都是20 true 
console.log(m===n)  // 比较值与类型：第一个类型是Number，第二个类型是String 即使最后值相同，也是 false

逻辑运算符

逻辑运算符两边结果是布尔值，返回结果也是布尔值

• && 表示并且，需要两个同时满足，返回 true
• || 表示且，只要有一个满足，就返回true
• ！ 表示非，就是取反的意思，如果为true 则返回 false，反之亦然

// 逻辑运算符有：&&  ||  !
1<2 && 3>4   // true && false  结果是 false
 
1==1 || 3==4 // true || false  结果是 true
 
var flag = true
console.log(!flag)   // false

三元运算符

三元运算符也叫"三目运算符"，功能类似if···else···
语法：条件 ? 条件1 : 条件2

// 条件 ? 条件1(条件满足/为true时执行) : 条件2(条件不满足/为true时执行)
var age = 16
console.log(age<18?'未成年':'成年');  // 未成年

总结

使用 Number() String() Boolean() parseInt() parseFloat() 进行转换属于"强制类型转换"，也叫"显示类型转换"。
使用 运算符进行计算时，中间会出现"隐式类型转换"。

【自己总结的，难免出错，仅供参考】