Js将字符串转数字的方式
Js
字符串转换数字方方式主要有三类:转换函数、强制类型转换、弱类型隐式类型转换,利用这三类转换的方式可以有5
种转换的方法。
parseInt()
parseInt()
和Number.parseInt()
是最常用的转换字符串为整数数值的方法,其中Number.parseInt()
是ES6
之后为了减少全局方法的定义才增加的静态方法,实质与全局方法parseInt()
相同,他们的规则如下:
- 忽略字符串前面的空格,直至找到第一个非空字符。
- 如果第一个非空字符不是数字或者是正负号则返回
NaN
。
- 如果第一个是数字字符一直解析到一个非数字字符。
- 如果第一个是数字字符,能识别出各种整数格式。
- 接受第二个参数,即转换时使用的基数。
- 小数向下取整。
console.log(Number.parseInt(true)); // NaN
console.log(Number.parseInt(false)); // NaN
console.log(Number.parseInt(null)); // NaN
console.log(Number.parseInt(undefined)); // NaN
console.log(Number.parseInt(NaN)); // NaN
console.log(Number.parseInt(" 123")); // 123
console.log(Number.parseInt(" ab123")); // NaN
console.log(Number.parseInt("")); // NaN
console.log(Number.parseInt(" 31avs")); // 31
console.log(Number.parseInt("0xF")); // 15
console.log(Number.parseInt("070")); // es3->56 es5->70
console.log(Number.parseInt("A", 16)); // 10
console.log(Number.parseInt("A")); // NaN
console.log(Number.parseInt("51.2")); // 51
console.log(Number.parseInt("-51.2")); // -51
parseFloat()
parseFloat()
和Number.parseFloat()
是最常用的转换字符串为浮点数数值的方法,其中Number.parseFloat()
是ES6
之后为了减少全局方法的定义才增加的静态方法,实质与全局方法parseFloat()
相同,他们的转换规则如下:
- 忽略字符串前面的空格,直至找到第一个非空字符。
- 如果第一个非空字符不是数字或者是正负号则返回
NaN
。
- 如果第一个是数字字符一直解析到一个非数字字符。
- 字符串中第一个小数点是有效的第二个小数点是无效的。
- 只解析
10
进制,不接受第二个参数。
console.log(Number.parseFloat(true)); // NaN
console.log(Number.parseFloat(false)); // NaN
console.log(Number.parseFloat(null)); // NaN
console.log(Number.parseFloat(undefined)); // NaN
console.log(Number.parseFloat(NaN)); // NaN
console.log(Number.parseFloat("123")); // 123
console.log(Number.parseFloat(" 123.1")); // 123.1
console.log(Number.parseFloat(" ab123.1")); // NaN
console.log(Number.parseFloat("")); // NaN
console.log(Number.parseFloat(" 123.3.4eqw")); // 123.3
console.log(Number.parseFloat("0xF")); // 0
Number()
Number()
构造函数会返回一个字面量值,而使用new Number()
则会返回一个数字对象,他们的转换规则如下:
- 如果是
Boolean
值,true
和false
分别返回1
或0
。
- 如果是数字,只是单纯的传入和返回。
- 如果是
null
,则返回0
。
- 如果是
undefined
返回NaN
。
- 如果是字符串且字符串为空则返回零,忽略前导零。
- 如果是字符串且字符串为整数则返回整数,忽略前导零。
- 如果是字符串且字符串为浮点数则返回浮点数。
- 如果是字符串且字符串为
16
进制,转为10
进制返回。
- 除以上格式返回
NaN
。
- 如果是对象,则调用对象的
valueOf
,按照前面的规则返回值,如果返回NaN
,再调用toString()
,按照前面的规则返回值。
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number(NaN)); // NaN
console.log(Number("")); // 0
console.log(Number("123")); // 123
console.log(Number(" 123")); // 123
console.log(Number("123.12")); // 123.12
console.log(Number("0xF")); // 15
位运算
位运算是直接对二进制位进行计算,它直接处理每一个比特位,是非常底层的运算,好处是速度极快,缺点是很不直观。位运算只对整数起作用,如果一个运算数不是整数,会自动转为整数后再运行。在JavaScript
内部,很多时候数值都是以64
位浮点数的形式储存,但是做位运算的时候,是以32
位带符号的整数进行运算的,并且返回值也是一个32
位带符号的整数。
// ~~
console.log(~~(true)); // 1
console.log(~~(false)); // 0
console.log(~~(null)); // 0
console.log(~~(undefined)); // 0
console.log(~~(NaN)); // 0
console.log(~~("")); // 0
console.log(~~("123")); // 123
console.log(~~(" 123")); // 123
console.log(~~("123.12")); // 123
console.log(~~("0xF")); // 15
// <<
console.log(true << 0); // 1
console.log(false << 0); // 0
console.log(null << 0); // 0
console.log(undefined << 0); // 0
console.log(NaN << 0); // 0
console.log("" << 0); // 0
console.log("123" << 0); // 123
console.log(" 123" << 0); // 123
console.log("123.12" << 0); // 123
console.log("0xF" << 0); // 15
// >>
console.log(true >> 0); // 1
console.log(false >> 0); // 0
console.log(null >> 0); // 0
console.log(undefined >> 0); // 0
console.log(NaN >> 0); // 0
console.log("" >> 0); // 0
console.log("123" >> 0); // 123
console.log(" 123" >> 0); // 123
console.log("123.12" >> 0); // 123
console.log("0xF" >> 0); // 15
一元运算符
一元运算符可以将字符串进行隐式的类型转换,与其它的解析方式不同,如果是一个NaN
值,那么返回的也是NaN
,通常使用+
操作符,因为这个方式不容易混淆。
console.log(+(true)); // 1
console.log(+(false)); // 0
console.log(+(null)); // 0
console.log(+(undefined)); // NaN
console.log(+(NaN)); // NaN
console.log(+("")); // 0
console.log(+("123")); // 123
console.log(+(" 123")); // 123
console.log(+("123.12")); // 123
console.log(+("0xF")); // 15
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/7962deab3cea
https://juejin.im/post/6855129005897711624
https://blog.fundebug.com/2018/07/07/string-to-number/