探索parseInt的奥秘：JavaScript整数转换技巧全解析

探索parseInt的奥秘：JavaScript整数转换技巧全解析

你以为parseInt很简单？

第一次看到parseInt的时候，我天真地以为它就是用来把字符串变成数字的，

parseInt("42"); // 42  

嗯,看起来确实是这样，但后来我发现，事情远没有这么简单。

你试过这个吗？

parseInt("08"); // 8？不，在某些环境里是0！  

没错,早期的JavaScript（ES5之前）会把以0开头的字符串当成八进制处理，所以"08"会被解析成0，因为8不是合法的八进制数字。

后来ES5修复了这个问题,默认按十进制解析，但如果你还在维护老代码，或者某些环境（比如某些Node.js版本）没严格遵循标准，这个坑还是可能踩到。

第二个参数：基数（radix）的玄学

parseInt的第二个参数是基数（radix），也就是告诉它：“嘿，这个字符串是几进制的？”

如果你不传这个参数,parseInt会自己猜：

• 以0x或0X开头？十六进制。
• 以0开头？可能八进制（看环境）。
• 其他情况？十进制。

但问题是,它猜得不一定对。

parseInt("0x10"); // 16（十六进制）  
parseInt("010");  // 10（ES5+），8（老环境）  
parseInt("10", 2); // 2（二进制解析）  

最佳实践：永远显式指定基数！

parseInt("08", 10); // 8，稳了  

那些奇怪的解析行为

parseInt在解析时会从左到右扫描字符串，遇到非数字字符就停止，听起来合理，但有些情况会让你怀疑人生：

parseInt("123abc"); // 123（忽略后面的字母）  
parseInt("abc123"); // NaN（开头就不是数字）  

但更离谱的是：

parseInt("1e3"); // 1（e被当成非数字字符）  

如果你想要科学计数法的解析,用Number()或者操作符：

Number("1e3"); // 1000  
+"1e3"; // 1000  

浮点数？不存在的

parseInt的名字里有“Int”，所以它只解析整数部分，直接砍掉小数：

parseInt("3.14"); // 3  
parseInt("3.99"); // 3  

如果你想要浮点数,用parseFloat：

parseFloat("3.14"); // 3.14  

实战中的坑与解决方案

案例1：表单输入的数值解析

假设你从<input>里拿到一个值：

const userInput = document.querySelector("#age").value; // "42"  
const age = parseInt(userInput, 10);  

但如果用户输入的是"42 years old"呢？

parseInt("42 years old", 10); // 42（还能用）  

但如果用户输入的是"I'm 42"呢？

parseInt("I'm 42", 10); // NaN（完蛋）  

解决方案：先用正则提取数字部分：

const ageStr = "I'm 42".match(/\d+/)?.[0]; // "42"  
const age = ageStr ? parseInt(ageStr, 10) : NaN;  

案例2：解析CSS单位

有时候你需要从"100px"里提取数字：

parseInt("100px", 10); // 100  

但如果单位在前呢？

parseInt("px100", 10); // NaN  

这时候可以用parseFloat，因为它能处理部分情况：

parseFloat("100.5px"); // 100.5  

parseInt的正确打开方式

1. 永远传基数，避免八进制坑：parseInt(str, 10)。
2. 非数字开头返回NaN，记得做错误处理。
3. 浮点数用parseFloat，别指望parseInt给你小数。
4. 奇怪的字符串先清洗，比如用正则匹配数字部分。

parseInt看似简单，但细节多得让人头大，你现在是不是觉得，这玩意儿比想象中复杂多了？

（反正我第一次踩坑的时候，debug了半小时才反应过来是基数的问题……）