JavaScript字符串转数字的5种方法及遇到的坑

让我来为你详细讲解JavaScript字符串转数字的5种方法及遇到的坑。

为什么需要字符串转数字？

在日常的JavaScript编程中，我们经常需要将字符串类型的数据转换为数字类型。例如，从用户输入的表单中获取数值，并将其用于数学运算中。

JavaScript字符串转数字的5种方法

parseInt()

parseInt() 方法可以将字符串转换为整数。它接收两个参数：要转换的字符串和转换时使用的基数。

// 示例1
let str = '10';
let num = parseInt(str);
console.log(typeof num, num); // 输出：number 10

// 示例2
let str2 = '0101';
let num2 = parseInt(str2, 2);
console.log(typeof num2, num2); // 输出：number 5

在示例1中，我们将字符串 '10' 转换成了整数类型的数字 10。在示例2中，我们将字符串 '0101' 按照二进制的方式解析，得到整数类型的数字 5。需要注意的是，如果转换时未指定基数，则会以 10 为默认基数进行转换。

但需要注意的是，parseInt()有可能存在一些不一致的情况，例如：

console.log(parseInt('3.14'));  // 3
console.log(parseInt('11', 2)); // 3

在这两个示例中，parseInt() 的结果与我们预期的不一致。因此在使用 parseInt() 时，我们需要考虑其中的一些限制和缺陷。

parseFloat()

parseFloat() 方法可以将字符串解析为浮点数。

let num = parseFloat('3.14');
console.log(typeof num, num); // 输出：number 3.14

需要注意的是，parseFloat() 的返回值与参数字符串的小数点后的位置有关，如：

console.log(parseFloat('3.14abc')); // 3.14
console.log(parseFloat('a123.45')); // NaN

Number() 构造函数

使用 Number() 构造函数也可以将字符串转换成数字类型。

let num1 = Number('123');
let num2 = Number('3.14');
let num3 = Number('0b110');
let num4 = Number('0o73');
let num5 = Number('0x1A');

console.log(typeof num1, num1); // 输出：number 123
console.log(typeof num2, num2); // 输出：number 3.14
console.log(typeof num3, num3); // 输出：number 6
console.log(typeof num4, num4); // 输出：number 59
console.log(typeof num5, num5); // 输出：number 26

需要注意的是，Number() 构造函数有一些特殊规则。例如，当参数为一个空字符串时，返回值为 0，而当参数为一个不能转换为数字的字符串时，返回值为 NaN。

Number.parseInt()

Number.parseInt() 和 parseInt() 方法类似，也可以将字符串转换为整数。

let num = Number.parseInt('123');
console.log(typeof num, num); // 输出：number 123

与 parseInt() 方法不同的是，Number.parseInt() 不能提供第二个参数，并且不能识别出以 0 开头的字符串。

Number.parseFloat()

Number.parseFloat() 和 parseFloat() 方法类似，也可以将字符串转换为浮点数。

let num = Number.parseFloat('3.14');
console.log(typeof num, num); // 输出：number 3.14

与 parseFloat() 方法不同的是，Number.parseFloat() 不能识别出以非数字字符开头的字符串。

遇到的坑

在字符串转数字的过程中，我们需要注意一些坑点，防止在使用时出现错误。

不同进制的转换受限

在使用 parseInt() 方法时，需要指定要转换的基数。但需要注意的是，只有十进制以下才能进行基数的指定，即可以通过 parseInt('0b110', 2) 或 parseInt('0o73', 8) 将二进制或八进制转为十进制，但是无法通过 parseInt('0x1A', 16) 将十六进制转为十进制。

parseFloat() 的小数点位置问题

在使用 parseFloat() 方法时，它的返回值与参数字符串的小数点后的位置有关。需要注意字符串中含有多个小数点时，只会返回第一个小数点前的数字，例如 parseFloat('3.14abc') 的返回值为 3.14。

特殊规则

在使用 Number() 构造函数时，需要注意它存在一些特殊规则。例如，当参数为一个空字符串时，返回值为 0，而当参数为一个不能转换为数字的字符串时，返回值为 NaN。同样地，在使用 parseInt() 方法时，输入字符串如果是一个隐式的十六进制数值（如 '0x10'），解析后也会返回一个数字 16。

总结

本文介绍了JavaScript字符串转数字的5种方法：parseInt()、parseFloat()、Number() 构造函数、Number.parseInt() 和 Number.parseFloat()，并且总结了在使用过程中需要注意的坑点。在实际开发中，我们需要结合业务需求，灵活选择适合自己场景的转换方法。