一文带你了解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() 进行转换属于"强制类型转换",也叫"显示类型转换"。
使用 二元运算符进行计算时,中间会出现"隐式类型转换"。

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值