在 JavaScript 中，类型转换是一个非常重要的概念，尤其是数字类型的转换。由于 JavaScript 是一门动态类型语言，它会根据不同的上下文和操作符自动进行类型转换。在进行类型转换时，尤其是数字的转换，我们有几种常用的方法：Number()、parseInt()、parseFloat() 和 + 操作符。

1. + 运算符1.1 用法

在 JavaScript 中，+ 除了用于加法运算外，还可以用作一元运算符，将其他类型的值转换为数字。例如：

let str1 = "10";
let str2 = "20";
let sum = +str1 + +str2; // 30

1.2 特点1.3 示例

// 字符串转数字
console.log(+"123"); // 123
console.log(+true);   // 1
console.log(+false);  // 0
console.log(+"");     // 0
console.log(+"abc");  // NaN

2. Number()2.1 用法

Number()是一个全局函数，用于将任何类型的值转换成数字。它比+运算符更加明确。

let value1 = "42";
let value2 = true;
let num1 = Number(value1); // 42
let num2 = Number(value2);  // 1

2.2 特点2.3 示例

// 字符串转数字
console.log(Number("123"));          // 123
console.log(Number(""));             // 0
console.log(Number("abc"));          // NaN
console.log(Number(true));           // 1
console.log(Number(false));          // 0
console.log(Number(null));           // 0
console.log(Number(undefined));      // NaN
console.log(Number([]));             // 0
console.log(Number([1, 2, 3]));     // NaN

3. parseInt()3.1 用法

parseInt()函数用于将字符串解析为整数，接受两个参数：要解析的字符串和可选的基数（radix）。

let intValue = parseInt("123px"); // 123
let hexValue = parseInt("0xF", 16); // 15

3.2 特点3.3 示例

console.log(parseInt("123abc"));  // 123
console.log(parseInt("abc123"));  // NaN
console.log(parseInt("10.5"));     // 10
console.log(parseInt("0x1F"));     // 31

console.log(parseInt("010"));       // 10（在大多数情况下，前导零不影响结果）
console.log(parseInt("08"));        // 8（从 ECMAScript 5 开始，字符串中前导的 0 不是八进制）
console.log(parseInt("10", 2));     // 2（将字符串 "10" 解析为二进制）
console.log(parseInt("100", 8));    // 64（将字符串 "100" 解析为八进制）

4. parseFloat()4.1 用法

parseFloat()函数用于将字符串解析为浮点数，仅接受一个参数：要解析的字符串。

let floatValue = parseFloat("3.14xyz"); // 3.14

4.2 特点4.3 示例

console.log(parseFloat("3.14"));            // 3.14
console.log(parseFloat("10.5px"));          // 10.5
console.log(parseFloat("0.1e1"));            // 1
console.log(parseFloat("  2.5  "));        // 2.5
console.log(parseFloat("abc3.14"));         // NaN
console.log(parseFloat("10.5"));             // 10.5
console.log(parseFloat("e5"));               // NaN

5. 总结与比较转换方式适用情况特点

需要快速转换为数值

隐式转换，返回 NaN

Number()

明确要求数值转换

支持多种类型，NaN 处理明确

parseInt()

需要获取整数，不关心小数部分

只返回整数，支持可选基

parseFloat()

需要获取浮点数

返回浮点数，支持科学计数法

6. 常见问题

1. 如何处理NaN ？

在进行数值操作时，应始终检查结果是否为NaN。可以使用isNaN()函数来判断。

let result = Number("abc");
if (isNaN(result)) {
    console.log("转换失败，结果是 NaN");
}

2. 在何种情况下选择parseInt()而非Number() ？

当你只关心字符串中的整数部分，且字符串的格式不确定时，使用parseInt()会更加合适。例如，处理用户输入时。

3. 如何确保浮点数计算的精度？

JavaScript 中的浮点数计算可能引发精度问题，使用toFixed()方法可以格式化输出。

let result = (0.1 + 0.2).toFixed(2); // "0.30"