1. parseInt 与 parseFloat 的基本区别
定义与基本语义
在 JavaScript 中，parseInt 和 parseFloat 都用于从字符串提取数字，但两者在返回值的语义和可解析的文本范围上有显著差异。
parseInt 强调整数部分的提取，并可以指定进制（radix），如 10 进制、16 进制等；如果字符串以非数字开头会返回 NaN。
相比之下，parseFloat 专注于浮点数解析，自动处理小数点和指数形式，遇到非数字字符时也会停止，但不会处理进制前缀。
返回值和异常情况
两者的返回值类型都是 Number，其中 parseInt 可能返回 NaN，而 parseFloat 也可能返回 NaN，仅当没有可解析的数值时。
如果提供了 radix 参数，parseInt 会按指定进制解析，这在数值格式混杂时尤其重要。
典型行为示例
例如，parseInt 会在遇到非数字时停止，如字符串中的单位或字母；而 parseFloat 会跳过前导空格并尝试解析整形或浮点数，遇到非数字时停止。
console.log(parseInt("42px")); // 42
console.log(parseFloat("42.5px")); // 42.5
console.log(parseInt("0x10", 10)); // 16
console.log(parseFloat("1.2e3")); // 1200
本文目的在于明确区分这两种数值解析函数的差异点，以便在实际开发中正确选择和使用。
进阶要点
同一输入，parseInt 与 parseFloat 的结果可能不同，尤其在包含小数、前缀或指数形式时。
请注意，若希望稳定行为，显式传入 radix，并掌控输入的边界条件，是避免潜在差异与误解的关键。
常见代码示例
console.log(parseInt("12px", 10)); // 12
console.log(parseInt("0x10")); // 16（十六进制，若未显式提供 radix，行为可能依浏览器而异）
console.log(parseInt("010")); // 10 或 8（取决于实现，强烈建议显式 radix=10）
console.log(parseFloat("12.34")); // 12.34
console.log(parseFloat("12.34abc")); // 12.34
2. parseInt 与 parseFloat 的进制与语义边界
进制与前缀的影响
parseInt 的 radix 参数决定了字符串的解析基数，如果省略 radix，在某些环境中会出现基数推断差异，因此强烈推荐显式传入 radix。
而 parseFloat 不处理 0x 或其它前缀的进制，直接按十进制把数字解析成浮点数。
空白字符与首字符
两者在解析前会先跳过前导空白字符，如果字符串以字母或符号作为开头，通常会返回 NaN。
对于 parseInt，如果开头是 + 或 -，也会被视为符号并参与解析。
混合文本的处理
当字符串中包含非数字字符时，parseInt 与 parseFloat 都会在遇到第一个无效字符时停止，返回已解析的部分。
console.log(parseInt(" -12abc", 10)); // -12
console.log(parseFloat(" -12.3abc")); // -12.3
3. 常见误区与坑点
误区一：不传 radix 会自动按十进制
尽管现代浏览器对 parseInt 提供了更多一致性，但不同环境仍可能产生差异，始终显式传 radix 可以避免该误区。
误区二：字符串包含小数时解析整型
parseInt 会截断小数部分，因此 parseInt("12.9") 等于 12，而 parseFloat 会保留小数。
误区三：数值前的符号影响结果
parseInt 能正确处理前导符号；但对于空格、前缀和基数不正确的组合，结果很容易让人误解，务必对输入有控制。
console.log(parseInt(" +8", 10)); // 8
console.log(parseFloat(" +8")); // 8
4. 实用示例：从字符串中提取数字的正确做法
示例一：从 CSS 尺寸中提取整数和浮点数
在处理 CSS 值如 “16px” 时，parseInt 可以快速提取整数，parseFloat 能提取浮点数。
let w = "16px";
let wInt = parseInt(w, 10); // 16
let wFloat = parseFloat(w); // 16
示例二：从 CSV 解析数值列
从 CSV 字符串中提取数字时，选择合适的函数很关键。
let csv = "name,score\nAlice,92.5\nBob,88.0";
let lines = csv.split("\\n").slice(1);
let scores = lines.map(l => parseFloat(l.split(",")[1]));
// scores => [92.5, 88]
示例三：避免混淆的安全做法
在需要严格解析时，优先使用 Number 构造函数或一类正规数值校验，避免 parseInt 的副作用。
function toNumberSafe(str) {// 使用 Number 构造函数并结合 isNaN 检查const n = Number(str);return isNaN(n) ? NaN : n;
}
console.log(toNumberSafe("12")); // 12
console.log(toNumberSafe("12px")); // NaN
