JavaScript字符串转数字的三种方法详解

JavaScript字符串转数字的三种方法详解

JavaScript中将字符串转换为数字主要包含三种实现方式。

具体包括使用内置转换函数、执行强制类型转换，以及利用JavaScript变量的弱类型特性进行隐式转换。

使用转换函数

1. 使用转换函数

JavaScript内置了parseInt()和parseFloat()两个核心转换函数。前者负责将值转换为整数，后者负责转换为浮点数。这两个函数仅对String类型参数能正确执行转换操作；若传入其他数据类型，均会返回NaN（Not a Number）。

在确定字符串是否代表数值之前，parseInt()和parseFloat()会严格分析字符串内容。parseInt()首先检查位置0处的字符是否为有效数字；若无效，直接返回NaN并终止后续操作。若有效，则继续检查位置1处的字符，重复此测试过程，直至遇到非有效数字字符为止。此时，parseInt()会将该字符之前的子字符串转换为数字。

例如，将字符串 "1234blue "转换为整数时，parseInt()返回1234，因为在检测到字符'b'时停止解析。字符串中的数字字面量会被正确转换，因此 "0xA "会被转换为数字10。然而，字符串 "22.5 "会被转换为22，因为对于整数而言，小数点属于无效字符。具体示例如下：

 
parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN

parseInt()还支持基模式，可将二进制、八进制、十六进制或其他进制的字符串转换为整数。基数值由parseInt()的第二个参数指定。因此，解析十六进制值需按如下方式调用parseInt()：

parseInt("AF", 16); //returns 175

同样地，对于二进制、八进制乃至十进制（默认模式），均可通过指定基数参数进行解析：

 
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10

若十进制数包含前导0，建议明确指定基数为10，以避免被误解析为八进制值。例如：

 
parseInt("010"); //returns 8
parseInt("010", 8); //returns 8
parseInt("010", 10); //returns 10

上述代码中，前两行均将字符串 "010 "解析为数字。第一行默认将其视为八进制值，解析逻辑与第二行（显式声明基数为8）一致。最后一行声明基数为10，因此iNum3最终值为10。

parseFloat()的处理逻辑与parseInt()类似，从位置0开始逐个检查字符，直到发现第一个非有效字符，并将该字符之前的字符串转换为数字。不同之处在于，parseFloat()认为第一个出现的小数点是有效字符。若存在两个小数点，第二个小数点被视为无效，parseFloat()仅将第一个小数点前的字符串转换为数字。这意味着字符串 "22.34.5 "将被解析为22.34。

使用parseFloat()的另一区别在于，字符串必须以十进制形式表示浮点数，不支持八进制或十六进制表示。

该方法会忽略前导0，因此八进制数0908将被解析为908。对于十六进制数0xA，该方法返回NaN，因为在浮点数中，'x'不是有效字符。此外，parseFloat()不支持基模式。

以下是使用parseFloat()方法的示例：

 
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN

强制类型转换

2. 强制类型转换

还可以使用强制类型转换（type casting）来处理值的类型。通过强制类型转换，可以获取特定类型的值，即使该值原本属于其他类型。

ECMAScript中提供以下三种强制类型转换：

Boolean(value)——将给定值转换为Boolean类型；

Number(value)——将给定值转换为数字（包括整数或浮点数）；

String(value)——将给定值转换为字符串。

使用上述任一函数进行转换时，会创建一个新值，存放由原始值直接转换后的结果。这种机制可能导致意想不到的后果。

当待转换值包含至少一个字符的字符串、非0数字或对象（后续章节将讨论）时，Boolean()函数返回true。若值为空字符串、数字0、undefined或null，则返回false。

可通过以下代码段测试Boolean型的强制类型转换：

 
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object

Number()的强制类型转换与parseInt()和parseFloat()方法处理方式相似，区别在于它转换的是整个值，而非部分值。回顾前文，parseInt()和parseFloat()仅转换第一个无效字符之前的字符串，因此 "4.5.6 "会被转换为 "4.5 "。使用Number()进行强制类型转换时，"4.5.6 "将返回NaN，因为整个字符串无法完整转换为数字。若字符串能完整转换，Number()会判断应调用parseInt()还是parseFloat()。下表说明了针对不同值调用Number()方法的结果：

用法结果

 
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100

最后一种强制类型转换方法String()最为简单，因为它可将任何值转换为字符串。执行此转换只需调用传入值的toString()方法，即将1转换为 "1 "，将true转换为 "true "，将false转换为 "false "，依此类推。强制转换为字符串与调用toString()方法的唯一区别在于，对null或undefined值进行强制类型转换可生成字符串而不会引发错误：

 
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won't work, causes an error

利用JS变量弱类型转换

3. 利用JS变量弱类型转换

通过一个小示例即可直观理解。

 
<script>
var str= '012.345 ';
var x = str-0;
x = x*1;
</script>

上述示例利用了JavaScript弱类型的特性，仅通过算术运算实现了字符串到数字的类型转换。不过，这种方法并不推荐在实际开发中使用。