远离JavaScript字符串转数字的坑

我心飞翔 分类:javascript

前言

通过一道面试题引申出JavaScript字符串转数字。

面试题

使用 + 或一元加运算符是将字符串转换为数字的最快方法吗?

根据[MDN文档][1],+是将字符串转换为数字的最快方法,因为如果值已经是数字,它不会执行任何操作

那么我们了解多少种将字符串转换为数字的方法呢?
接下来我们一一了解一下吧!

JavaScript字符串转数字

1. parseInt

定义和用法

parseInt() 函数可解析一个字符串,并返回一个整数。

语法

parseInt(string, radix)

parseInt("10");			// 10
parseInt("19",10);		// 19 
parseInt("11",2);		// 3 
parseInt("17",8);		// 15 
parseInt("1f",16);		// 31 
parseInt("010",2);              // 2
//按10 为基数来解析  
parseInt("010");		// 10  陷阱         
parseInt('08');                 // 8   陷阱  
// 只读取字符串以数字开头的整数部分
parseInt('44.jpg');              // 44   陷阱 
parseInt('jpg12');              //NaN  
 

注意:ECMAScript 5 规范不再允许 parseInt 函数的实现环境把以 0 字符开始的字符串作为八进制数值。如果 radix 没有指定或者为 0,参数会被假定以 10 为基数来解析,如果数值以字符对 0x0X 开头,会假定以 16 为基数来解析。

parseInt: 没有传入基数时,默认是传入的基数为10 parseInt(num, 10),如果你不知道num属性的类型,不要使用parseInt进行字符串转数字。

2. parseFloat

定义和用法

parseFloat() 函数可解析一个字符串,并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

语法

parseFloat(string)

parseFloat("10");//10
parseFloat("10.33"); //10.33
//字符串中有空格来分割数字,那么只会读取第一个数字
parseFloat("34 45 66"); //34
parseFloat(" 60 ")//60
// 只读取字符串以数字开头的整数部分
parseFloat("40 years");//40
parseFloat("He was 40");//NaN
parseInt(-0xFF) //  -255
parseInt("-0xFF") //  -255
parseFloat(-0xFF) //  -255
//字符串中的负十六进制数字是一个特殊情况 
parseFloat("-0xFF") //  -0   陷阱 
 

注意:parseFloat: 转换十六进制数时要小心,如果你不知道要转换对象的类型,不要使用 parseFloat。字符串中的负十六进制数字是一个特殊情况,如果你用 parseFloat 解析,结果是不正确的。为了避免程序出现 NaN 的情况,应该检查转化后的值。

3. 按位非

可以把字符串转换成整数,但他不是浮点数。如果是一个字符串转换,它将返回0;

~~1.23 // 1 陷阱 只取整数部分
~~"1.23" // 1 
~~"23" // 23
~~"Hello world" // 0  陷阱 只对整数有效,对字符串字符无效
~~"0xFF"  // 255
~~-0xff   // -255
~~"-0xFF"  // 0  陷阱  对于字符串负十六进制数无法解析
 

注意:~是按位取反运算,~~是取反两次。~~的作用是去掉小数部分,因为位运算的操作值要求是整数,其结果也是整数,所以经过位运算的都会自动变成整数。

按位非:用它确保输入中没有字符,仅用于整数

4.Number

定义和用法

Number() 函数把对象的值转换为数字。

如果对象的值无法转换为数字,那么 Number() 函数返回 NaN。

语法

Number(object)

Number:几乎不用它。

Number("023") //  23  陷阱
Number("0XFF") //  255
Number("-0XFF") // NaN  陷阱
Number(023) //  19  
 

注意:023实际上是一个八进制数,无论你怎么做,都是返回19;对于没有单引号或双引号的十六进制数一样。但是对于带有单引号和双引号的八进制数(以0字符开始的),是不会转为八进制对应的十进制数的,只会当做十进制来解析。对于字符串中的负十六进制数字,Number是不能解析的,显示为NaN。

5.一元运算符(重点)

+"023" //23 推荐使用 + 
+"16"  //16
+"-15" //-15
+"-0xFF" //NaN  
+"0xFF"  //255
"1.23" * 1  //1.23
"1.23" / 1  //1.23
"2.23" - 0  // 2.23
"0xFF.jpg" / 1  // NaN 
 

加法运算符会触发三种类型转换:

  • 转换为原始值
  • 转换为数字
  • 转换为字符串

注意:一元运算符与其它的解析方式不同,如果是一个 NaN 值,那么返回的也是 NaN 。基本使用+操作符,因为这个方式不容易混淆。虽然 -0 的用法也很好,但它并没有很好的表达转换为数字的本意。 +是将字符串转换为数字的最快方法。

总结

负十六进制数字符串转换为数字时。最好使用带基数的 parseInt 解析为数字。明确知到进制数的也是通过带基数的 parseInt 解析为数字。其他的建议使用一元运算符+来将字符串转数字,也是最快的。

回复

我来回复
  • 暂无回复内容