快速提示：如何在JavaScript中把字符串转换为数字

在JavaScript中，有很多方法可以在数据类型之间进行转换。我们已经介绍过如何将数字转换为字符串。在这个简短的教程中，我们将看看如何在JavaScript中把一个字符串转换成一个数字。

在很多情况下，一个数字可能会被存储为一个字符串。例如，从表单元素中收到的值总是字符串。

一般来说，你可以把一个包含数字（而且只是数字）的JavaScript字符串当作一个数字来处理，JavaScript会自动为你进行字符串到数字的转换。然而，有时你需要从字符串中提取一个数字，或者对如何进行转换进行更多的控制。

在这个快速提示中，我们将介绍三种将字符串转换为数字的方法。

使用数字将字符串转换为数字

在JavaScript中，将字符串转换为数字的最直接方法是使用内置的Number 构造函数。比如说：

const str = "10"
console.log(str); // "10"
console.log(typeof str); // "string"

const number = Number(str);
console.log(number); // 10
console.log(typeof number); // "number"

当在控制台中记录str 的值和它的类型时，其结果分别是10 ，作为字符串和string 。经过转换后，结果是10 ，作为一个数字和number 。

使用parseInt()和parseFloat()将字符串转换为数字

另一种方法是使用parseInt() 和parseFloat() 。正如你所知道的，parseInt() 将字符串解析为整数，而parseFloat() 将字符串解析为带有小数点的数字。

比如说：

const str = "10.9"
console.log(str); // "10.9"
console.log(typeof str); // "string"

const intNumber = parseInt(str);
console.log(intNumber); // 10
console.log(typeof intNumber); // "number"

const floatNumber = parseFloat(str);
console.log(floatNumber); // 10.9
console.log(typeof floatNumber); // "number"

与第一种方法类似，当在控制台中记录str 的值和它的类型时，结果分别是10.1 为字符串和string 。然而，当使用parseInt 解析str 时，intNumber 的值变成了10 ，其类型是number 。

另一方面，当使用parseFloat 解析str 时，floatNumber 的值变成了10.1 ，是一个数字，其类型是number 。

parseInt的第二个参数

parseInt() 需要一个第二个参数，指定要从字符串中解析出来的数字的基数。这个参数实际上是可选的，但强烈建议你总是提供它。

如果没有这个第二个参数，parseInt 会自动进行小数点检测。也就是说，它通过一个数字在字符串中的格式来检测它的基数。一个以0x 或0X 开始的数字被认为是十六进制（基数16），而所有其他的数字被认为是十进制。

因此，例如，如果你要调用parseInt("08") ，输入值将被认为是一个八进制数；但8不是一个八进制数（因为八进制数是0-7），所以该函数将返回一个值0，而不是8。

为了避免任何混淆，在使用parseInt() 时一定要指定基数。

使用单数加法将字符串转换为数字

将字符串转换为数字的第三种方法是使用单数加号(+)。如果在操作数前使用单数加号，它将尝试将其转换为数字。因此，如果操作数是一个包含数字的字符串，单数加号将把它转换为数字。

比如说：

const str = "10";
console.log(typeof str); // "string"
console.log(+str); // 10
console.log(typeof +str); // "number"

当你记录str 的类型时，正如预期的那样，它是string 。然而，当你记录+str 的值和它的类型时，10 和number 分别被记录在控制台。

如何处理字符串中的非数字字符

重要的是要考虑到一个字符串可能包含数字以外的字符的情况，以及每种方法如何处理这种情况。

当使用Number() ，如果字符串包含数字以外的字符，开头的加号(+)和减号(-)，或小数点，返回值是特殊值NaN（非数字）。NaN是一个全局属性，代表不是一个数字。当一些数字运算的操作数或参数不是数字或不能用于该特定的数学运算时，它就会被一些数字运算返回。

另一方面，parseInt() 和parseFloat() ，如果数字在字符串的开头，就会解析该字符串。它去掉其余的字符，取在字符串开头遇到的数字。然而，如果字符串以数字以外的字符、开头的加号（+）和减号（-）或小数点开始，则返回值为特殊值NaN（非数字）。

正如你所看到的，Number() 返回NaN，因为字符串包含px 。然而，parseInt() ，因为它是在字符串的开头，所以返回10 。

你可以使用全局函数isNaN() ，检查一个值是否为NaN。

总结

这个简短的教程涵盖了在JavaScript中把字符串转换为数字的三种方法。Number() 可以把字符串转换为数字，无论是浮点数还是整数。然而，如果字符串包含其他字符，它将返回NaN。如果你想确保字符串的严格转换，这很有帮助。

另一方面，parseInt() 和parseFloat() 在处理数字中的其他字符方面是更灵活的方法。然而，这两个函数在某些情况下不能互换使用。例如，如果字符串中的数字是一个浮点数，而你使用parseInt() ，与字符串相比，你会得到一个不正确的值。

虽然单数很容易使用，但它会降低你代码的可读性。无论你选择哪种方法，都要注意返回的结果可能是NaN的情况。

快速提示：如何在JavaScript中把一个字符串转换成一个数字