在前端开发中，我们经常需要进行字符串和数字之间的转换。ES12 中提供了两个新的全局方法 Number.parseInt() 和 Number.parseFloat() 来帮助我们进行字符串转数字的操作。但是这两个方法在使用过程中也存在一些常见的误用，本文将介绍这些误用及解决方案。
Number.parseInt() 的误用
误用 1：未传入第二个参数
Number.parseInt() 方法用于将字符串转换为整数。它的第一个参数是要被转换的字符串，第二个参数是转换的进制数。如果不传入第二个参数，则默认为 10 进制。
console.log(Number.parseInt('123')); // 123这种情况下，Number.parseInt() 方法的行为和 parseInt() 函数一致。但是当我们传入的字符串以 0 开头时，就容易出现问题了。
console.log(Number.parseInt('012')); // 12
console.log(Number.parseInt('0xf')); // 15这是因为当第一个参数以 0 开头时，Number.parseInt() 方法会将其当作 8 进制或 16 进制数进行转换。所以在使用 Number.parseInt() 方法时，一定要注意传入第二个参数，以避免这种情况的发生。
解决方案：
console.log(Number.parseInt('012', 10)); // 12
console.log(Number.parseInt('0xf', 16)); // 15误用 2：传入非法字符串
Number.parseInt() 方法只能接受字符串作为第一个参数，如果传入的是其他类型的值，则会返回 NaN。
console.log(Number.parseInt(123)); // NaN console.log(Number.parseInt(true)); // NaN console.log(Number.parseInt(null)); // NaN
这种情况下，我们可以使用 typeof 运算符来判断传入的值是否为字符串类型。
解决方案：
const str = '123';
if (typeof str === 'string') {
console.log(Number.parseInt(str)); // 123
}Number.parseFloat() 的误用
误用：传入非法字符串
Number.parseFloat() 方法用于将字符串转换为浮点数。它的第一个参数是要被转换的字符串。如果传入的参数不是字符串，则会返回 NaN。
console.log(Number.parseFloat('123.45')); // 123.45
console.log(Number.parseFloat(123.45)); // 123.45
console.log(Number.parseFloat(true)); // NaN
console.log(Number.parseFloat(null)); // NaN这种情况下，我们可以使用 typeof 运算符来判断传入的值是否为字符串类型。
解决方案：
const str = '123.45';
if (typeof str === 'string') {
console.log(Number.parseFloat(str)); // 123.45
}总结
在使用 Number.parseInt() 和 Number.parseFloat() 方法时，一定要注意传入第二个参数和传入的参数类型。只有这样，才能保证我们的代码运行正确，并避免不必要的错误。
示例代码：
-- -------------------- ---- ------- -- ----------------- --- ------------------------------------ -- --- ------------------------------------ -- -- ------------------------------------ -- -- ---------------------------------- ----- -- -- ---------------------------------- ----- -- -- ---------------------------------- -- --- ----------------------------------- -- --- ----------------------------------- -- --- ----- --- - ------ -- ------- --- --- --------- - ---------------------------------- -- --- - -- ------------------- --- ----------------------------------------- -- ------ --------------------------------------- -- ------ ------------------------------------- -- --- ------------------------------------- -- --- ----- ---- - --------- -- ------- ---- --- --------- - ------------------------------------- -- ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6573b000d2f5e1655dcceeeb