远离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 为基数来解析，如果数值以字符对 0x 或 0X 开头，会假定以 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 解析为数字。其他的建议使用一元运算符+来将字符串转数字，也是最快的。