在前端开发中，经常需要将字符串转换为数字类型。但是，由于 JavaScript 中有多种方法可以实现这一点，开发者往往会感到困惑。本文将为您介绍两种最常用的方法，即 Number(x) 和 parseFloat(x)，并讨论它们之间的区别和适用场景。
Number(x)
Number(x) 方法可以将任何 JavaScript 值转换为数字类型。如果传入的参数不是一个合法的数字，则返回 NaN（Not a Number）。例如：
console.log(Number("123")); // 输出 123
console.log(Number("abc")); // 输出 NaN值得注意的是，Number(x) 可以将空字符串转换为0，因此需要谨慎使用。例如：
console.log(Number("")); // 输出 0另外，当传入的参数为对象时，Number(x) 将调用对象的 valueOf() 方法来获取其值。如果对象没有 valueOf() 方法或该方法返回的值无法转换为数字，则将调用对象的 toString() 方法，并尝试将其返回值转换为数字。例如：
console.log(Number({})); // 输出 NaN
console.log(Number([])); // 输出 0
console.log(Number(["1"])); // 输出 1parseFloat(x)
parseFloat(x) 方法仅能将字符串转换为数字类型。它会从字符串的开头开始解析，直到遇到第一个无法解析的字符为止。例如：
console.log(parseFloat("123.45")); // 输出 123.45
console.log(parseFloat("123abc456")); // 输出 123如果字符串的开头就是一个无法解析的字符，则返回 NaN。例如：
console.log(parseFloat("abc")); // 输出 NaN与 Number(x) 不同，parseFloat(x) 不会将空字符串转换为0，而是返回 NaN。例如：
console.log(parseFloat("")); // 输出 NaN建议
根据上述讨论，建议在以下情况下使用 Number(x)：
- 当需要将任何 JavaScript 值转换为数字类型时。
- 当需要将空字符串转换为0时。
而在以下情况下使用 parseFloat(x)：
当需要将字符串转换为数字类型时，且字符串可能包含小数点。
当需要控制小数点后的精度时，可以使用 toFixed() 方法来实现。例如：
const num = parseFloat("123.45").toFixed(2); console.log(num); // 输出 "123.45"
结论
在前端开发中，将字符串转换为数字类型是一项常见的任务，但不同的方法适用于不同的场景。本文介绍了 Number(x) 和 parseFloat(x) 两种最常用的方法，并从多个角度进行了比较和分析。希望本文对您有所启示，能够更好地选择适合自己场景的方法。
示例代码
-- -------------------- ---- ------- ----- --- - --------- -- -- --------- ------------- ----- ---- - ------------ ------------------ -- -- ------ -- -- ------------- ------------- ----- ---- - ---------------- ------------------ -- -- ------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11304