本文目录
显式类型转换
显式类型转换顾名思义,就是他的转换的类型你一看就可以看出来是什么类型,坦坦荡荡,真君子
显式类型转换在 JavaScript 中给我们提供了一些方法,我们一起来通过一些案例来测试一下
Number 转为数值型
Number 方法会将传递进入的值转为数值型并返回
-
我们可以先来看一下几个简单案例,如下:
var n1 = Number('111') var n2 = Number('abc') var n3 = Number(true) var n3 = Number(false) var n4 = Number('') var n5 = Number(null) var n6 = Number(undefined) console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111 console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: NaN console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 0 console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 0 console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: 0 console.log('类型是:', typeof n6, '值为:', n6) // 类型是: number 值为: NaN
-
上述的案例我们可以说一下字符串 abc 和 undefined 转为的值为 NaN 的情况,是因为通过 Number 方法转换的值一定是一个数值型,但是如果
无法用数字表达出来就是 NaN
,但是一定是数值型
-
其余的应该就没有什么好疑惑的了
parseInt 整形
parseInt 将一个值转为整数
-
案例如下:
var n1 = parseInt('1111') console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 1111 var n2 = parseInt('123abc') console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 123 var n3 = parseInt('123.567') console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 123 var n4 = parseInt(false) console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: NaN var n5 = parseInt('abc111') console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN
-
从这里我们可以发现一点区别,false 在 Number 中可以转为数值 0,在 parseInt 中则不可以,这是因为 parseInt 主要是将一个值转为整数,而 Number 是会将一个值尽最大可能的转为数值型
-
parseInt 遇见一个数字加其他字符结合的字符串,如果前面部分是数字的话,就会从最开始截止到首次出现非数字的字符为止,将这一部分截取出来转为整数,所以如果开头就是非数字的字符串则无法转换
-
当然这不是 parseInt 方法的全部,这个方法还具备
第二个参数
,这个参数就比较有意思了,radix(基底)
,我们可以先来看一下案例,如下:var n1 = parseInt('123', 16) console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 291
-
第二个参数 16 的意思就是将 123 以
十六进制为基底
转换为十进制
,如果想测试一下这个 291 是否正确,我们可以计算一下,十进制转为十六进制,对16进行取余来验算,首先第一次 291 / 16 余数为 3,商为 18,在用 18 除以 16,商为 1,余数为 2,1 除以 16 余数为 1,商为 0,所以到此结束运算,这些应该都很好理解,将余数顺序倒转取值就是 123,计算如图:
-
如果还不确定我们可以自己换算一下以 123 的十六进制换算为十进制,根据基数乘以指数的n次方来换算,基数就是 123,16 进制指数就是 16,这个次方就是基数的位置从 0 开始,类似索引,我们就可以得出一个式子,1 * 16^2 + 2 * 16^1 + 3 * 16^0,除 0 以外任何数的 0 次方都等于 1,计算结果为 291
-
既然都讲到这里了,那不说一下十六进制的 A-F 好像也说不过去啊,所以大概介绍一下,这个 A-F 就表式 10-15,为什么这么设计呢?因为十六进制采用的数位满 16 才进位,每个数位都会有 0-15 的范围,但是阿拉伯数字只有 0-9 是一位的,所以为了不引起混乱使用 A-F 代替 11- 15,更多的进制知识有兴趣的可以自己去了解一下
parseFloat
parseFloat 解析一个字符串,返回一个浮点数,通俗一点说就是小数,规则和 parseInt 相差不多
-
案例如下:
var n1 = '111.234' n1 = parseFloat(n1) console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111.234 var n2 = '11 22' n2 = parseFloat(n2) console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 11 var n3 = ' 11 ' n3 = parseFloat(n3) console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 11 var n4 = '88 hello' n4 = parseFloat(n4) console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 88 var n5 = 'xx22' n5 = parseFloat(n5) console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN
-
这个大家自行测试吧,没有太多特殊的地方
String 转为字符串
这个会将所有的值转为字符串,这个应该不难,很好理解,所以简单演式一下吧
-
案例如下:
var n1 = String(1111) console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 1111 var n2 = String(false) console.log('类型是:', typeof n2, '值为:', n2) // 类型是: string 值为: false var n3 = String(null) console.log('类型是:', typeof n3, '值为:', n3) // 类型是: string 值为: null var n4 = String(undefined) console.log('类型是:', typeof n4, '值为:', n4) // 类型是: string 值为: undefined
-
String 这个没什么好解释的,这个方法就是这么霸道,进入即同化,有那么点小说顶级功法味了
Boolean 布尔值
这个大家应该都很熟悉了,除开六个值都是 true
-
案例如下:
var n1 = Boolean(0) console.log('类型是:', typeof n1, '值为:', n1) // 类型是: Boolean 值为: false var n2 = Boolean('') console.log('类型是:', typeof n2, '值为:', n2) // 类型是: Boolean 值为: false var n3 = Boolean(null) console.log('类型是:', typeof n3, '值为:', n3) // 类型是: Boolean 值为: false var n4 = Boolean(undefined) console.log('类型是:', typeof n4, '值为:', n4) // 类型是: Boolean 值为: false var n5 = Boolean(NaN) console.log('类型是:', typeof n5, '值为:', n5) // 类型是: Boolean 值为: false var n6 = Boolean(false) console.log('类型是:', typeof n6, '值为:', n6) // 类型是: Boolean 值为: false
-
好了,其余都是无脑的 true,一路搜哈
toString 转为字符串
这个方法的使用方式有一点区别,不是直接传入值,而是那个值需要转为字符串就直接调用即可
-
案例如下:
var n1 = 111 n1 = n1.toString() console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 111 var n2 = null // n2 = n2.toString() // 报错 error var n3 = undefined // n3.toString() // 报错 error var n4 = true n4.toString() console.log('类型是:', typeof n4, '值为:', n4) // 类型是: boolean 值为: true
-
是不是发现不一样了,先来说一下为什么布尔值调用话说布尔值,这是为什么呢?首先一个对象原型身上的 toString 方法如果调用会返回一个
"[object xxx]"
格式的字符串,xxx 表式数据的类型名称,也因此这个常常被用作判断数据类型,而且非常精准,所以显然,这里是 Boolean 身上重写了一个 toString 方法,所以会输出的值还是没有转成字符串,下面对于各种数据的类型的 toString 方法做一个介绍,如果不理解原型链的知识不明白这个继承和重写的,可以选择记下来,如下:数据类型 方法描述 Array 将数组中的每个元素转为字符串,并将在元素间使用逗号分隔符进行拼接 Boolean 如果是 true 则返回 true,是 false 则返回 false Date 返回日期的文本表式 Error 返回一个包含相关错误信息的字符串 Function 返回整个方法的字符串 Number 返回一个数字字符串 String 返回一个字符串 Object 返回 “[object Object]” -
null 和 undefined 身上没有 toString 方法,所以会导致报错,为什么没有就是因为原型这一块的原因,不理解的可以自行了解相关知识
-
除了上面介绍的之外,这个 toString 也可以接收一个参数,而且有意思的是他和 parseInt 刚好相反,toString 方法也可以接收一个进制参数,
以十进制为基底转为目标进制
,我们可以写一些案例测试一下,如下:var n1 = 111 console.log(typeof n1.toString(8), n1.toString(8)) // string 157
-
至于十进制换算八进制的过程也和转换十六进制一样的,使用一样的取余方法,111 / 8 得到 13…7,13 / 8 得到 5…1,1 / 8 得到 0…1,倒转取值就是 157,这里不在展式图形的验算过程了,相信还是非常好理解的
隐式类型转换
隐式的类型转换其实本质上也是在内部运行了显式转换,只是没有告知我们,所以叫做隐式类型转换,因此要掌握隐式类型转换就要必须掌握显式类型转换
isNaN
-
这个方法相信大家都不陌生了,就是判断一个值是否是一个 NaN,返回一个布尔值,我们先看几个案例,如下:
var n1 = '111' console.log(isNaN(n1)) // false var n2 = 111 console.log(isNaN(n2)) // false var n3 = 'aaa' console.log(isNaN(n3)) // true var n4 = NaN console.log(isNaN(n4)) // true var n5 = null console.log(isNaN(n5)) // false var n6 = undefined console.log(isNaN(n6)) // true
-
这里我就讲一下 null 和 undefined 为什么是这个结果,isNaN 在内部是调用一次 Number() 之后在判断这个值是否为 NaN,null 被 Number 转换一次就是 0,0 不为 NaN,返回 false,undefined 被 Number 转为为 NaN,因此返回 true,其余的先使用 NUmber 转换一次在使用 NaN 判断应该就和明了了
++ – + - * / 运算符
-
先看一些 ++ 运算符的案例,在分析,如下:
var n1 = '111' n1++ console.log(n1) // 112 var n2 = null n2++ console.log(n2) // 1 var n3 = undefined n3++ console.log(n3) // NaN
-
++ 运算符在计算之前,就会
调用 Number 方法
先把值转为数值,经过这一层转换在计算 111 自增为 112,null 转为 0,自增为 1,undefined 转为 NaN,自增运算还是 NaN -
然后其余的 – + - 也是差不多的,来看一些案例,如下:
var n1 = '111' n1-- console.log(typeof n1, n1) // number 110 var n2 = 'abc' n2 = +n2 console.log(typeof n2, n2) // number NaN var n3 = null n3 = +n3 console.log(typeof n3, n3) // number 0 var n4 = '88' n4 = -n4 console.log(typeof n4, n4) // number -88 var n5 = '99' n5 = +n5 console.log(typeof n5, n5) // number 99
-
还是一样先执行 Number 方法,所以因此我们经常会利用在一个变量前面加上 + 来将其转为数值型
-
还可以在来看一下其他用法,如下:
var n1 = '5' var n2 = 20 var n3 = n2 - n1 console.log(typeof n3, n3) // number 15 var n4 = n1 * n2 console.log(typeof n4, n4) // number 10 var n5 = n2 / n1 console.log(typeof n5, n5) // number 4 var n6 = n2 + n1 console.log(typeof n6, n6) // string 205
-
这个
+
号比较特殊,当加号两侧有一个值是字符串的时候,就会调用 String 方法
把两个值都转为字符串,然后在拼接
,其余的还是调用 Number
&& || !
-
这三个就比较简单了,! 就是会调用 Boolean 将一个值转为 布尔值,&& 和 || 则是转为 布尔值 比较,但是返回的值不是这个布尔值,是本身,如下:
var test1 = null console.log(!test1) // true var test2 = 111 console.log(!test2) // false var test3 = 'abc' console.log(!!test3) // false var n1 = 0 var n2 = 111 var n3 = n1 && n2 console.log(n3) // 0 var n4 = n1 || n2 console.log(n4) // 111
-
上述的案例应该一眼就可以明白了,因此如果将一个值转为 布尔值,且这个布尔值不相反,通过可以使用 !! 进行转换,当然一般 ! 情况比较多,&& 和 || 的规则就不过多介绍了
< > <= >= == !=
-
这个也是进行比较,不过如果存在数字,就会先调用 Number 方法,在进行比较,如下:
var n1 = 111 var n2 = '222' console.log(n1 > n2) // false console.log(n1 < n2) // true console.log(n1 <= n2) // true console.log(n1 >= n2) // false
-
不过如果两个都是字符串类型,比较的就是 ASCII 码值
-
== 和 != 也存在隐式类型转换,如下:
var n1 = 111 var n2 = '222' console.log(n1 == n2) // false var n3 = '1' var n4 = 1 console.log(n3 == n4) // true var n5 = true var n6 = 0 console.log(n5 == n6) // false
-
也因为这个可以发现一些比较有意思的案例,如下:
console.log(false > true) // false console.log(1 > 2 > 3) // false console.log(10 > 7 < 3) // true
-
false 经过 Number 转换得到 0,true 转换得到 1,0 > 1 比较为 false
-
1 > 2 得到 false,false 经过 Number 转换得到 0,0 > 3 比较得到 false
-
10 > 7 得到 true,true 经过 Number 转换得到 1,1 < 3 比较得到 true
-
通过这个案例可以看到
比较是依次比较的
,因此无法直接通过两个比较判断一个一个数是否处于某个区间,如下:var n = 0 var res = null if (-1 < n < 1) { res = '在 -1 ~ 1 区间' } else { res = '不在 -1 ~ 1 区间' } console.log(res) // 不在 -1 ~ 1 区间
-
在来看一个案例,如下:
console.log(undefined < 0) // false console.log(undefined > 0) // false console.log(undefined == 0) // false console.log(null < 0) // false console.log(null > 0) // false console.log(null == 0) // false console.log(null == undefined) // true
-
这部分为什么是这些值,没有为什么,他们是系统定义的,生来如此,记住这些特殊的值就好了\
-
当然还有一个自己不等于自己的 NaN,如下:
console.log(NaN == NaN) // false
-
所以在进行业务开发的时候,一般会使用全等 === 和 !== 来判断