Javascript中关于数字类型转换方法的笔记

136 阅读2分钟

数字类型包含:常规数字和NaN(not a number),其中NaN比较特殊,NaN和任何值(包括自己)都不相等,所以我们不能用==的方式判断是否为有效数字,而是用专门的方法isNaN来判断。

Number([val])

字符串转数字

把字符串转换为数字,只要字符串中包含任意一个非有效数字字符(第一个·除外),结果都是NaN,其中空字符串会转为数字0

console.log(Number('12.5')); // => 12.5
console.log(Number('12.5px')); // => NaN
console.log(Number('12.5.4')); // => NaN
console.log(Number('')); // => 0

布尔类型转数字

console.log(Number(false)); // => 0
console.log(Number(true)); // => 1

null、undefined转数字

console.log(Number(null)); // => 0
console.log(Number(undefined)); // => NaN

引用类型的数据转数字

把引用数据类型转换为数字,是先把它基于toString方法转换为字符串,然后再转换为数字

console.log(Number({ name: '10' })); // => NaN
console.log(Number({})); // => NaN
console.log(Number([12])); // => 12, 因为[12].toString()='12'
console.log(Number([12, 23])); // => NaN, 因为[12, 23].toString()='12,23'
console.log(Number([])); // => 0,  因为[].toString()=''

parseInt()/parseFloat()

这两个方法转换数据的原理:它会从左到右查找有效数字字符,知道遇到非有效数字字符,停止查找(不管后面是否有数字都不再找),然后返回查找到的内容

字符串类型转换

console.log(parseInt('')); // => NaN
console.log(parseInt('12.5px')); // => 12
console.log(parseInt('width: 12.5px')); // => NaN
console.log(parseFloat('12.5px')); // => 12.5
console.log(parseFloat('width: 12.5px')); // => NaN

其他非数字类型转换

所有非数字和字符串类型的数据,都是先转为字符串,然后再转数字

console.log(parseInt(false)); // => NaN
console.log(parseInt(true)); // => NaN
console.log(parseFloat(false)); // => NaN
console.log(parseFloat(true)); // => NaN

console.log(parseInt(null)); // => NaN, null
console.log(parseInt(undefined)); // => NaN
console.log(parseFloat(null)); // => NaN
console.log(parseFloat(undefined)); // => NaN

console.log(parseInt({ name: '10' })); // => NaN
console.log(parseInt({})); // => NaN
console.log(parseInt([12.5])); // => 12, 因为[12].toString()='12.5'
console.log(parseInt([12.5, 23.6])); // => 12, 因为[12.5, 23.6].toString()='12.5,23.6'
console.log(parseInt([])); // => NaN,  因为[].toString()=''

console.log(parseFloat({ name: '10' })); // => NaN
console.log(parseFloat({})); // => NaN
console.log(parseFloat([12.5])); // => 12.5, 因为[12].toString()='12.5'
console.log(parseFloat([12.5, 23.6])); // => 12.5, 因为[12.5, 23.6].toString()='12.5,23.6'
console.log(parseFloat([])); // => NaN,  因为[].toString()=''

==比较表达式

==进行比较时,可能会出现把其他类型的值转换成数字类型,然后才进行表达式比较(PS: 一个==表达式中,只要遇到字符串,那么就是以字符串拼接的方式继续进行)

Number()方法与parseInt/parseFloat()的区别

Number方法走的是v8引擎底层的转换规则,依照上面所讲的规则去转换。

parseInt和parseFloat是额外封装的方法,针对的是字符串的处理,所以非字符串的值内部会先处理成字符串,再来解析