JS字符串转数字方法及parseInt和parseFloat区别

本文深入解析了JavaScript中字符串转数字的四大核心方法——parseInt、parseFloat、Number()和一元加号（+），重点揭示了它们在解析逻辑、容错边界、进制支持和杂质处理上的本质差异：parseInt仅提取开头整数部分且易受隐式进制干扰，需强制指定radix；parseFloat能完整识别浮点格式包括科学计数法，但对中间空格敏感；而Number()和+操作符则以“全字符串严格匹配”为原则，对任何非数字字符零容忍，更适合表单校验等高可靠性场景。文章最后给出清晰选型指南：面对不可控输入首选Number或+，确定纯数字开头取整用parseInt(str, 10)，需提取带单位的浮点值则非parseFloat莫属——帮你避开常见陷阱，写出更健壮、可维护的类型转换代码。

parseInt 会截断小数，只认最前面的整数部分

parseInt 从字符串开头开始解析，遇到第一个非数字字符就停止，返回已解析出的整数。它不处理小数点，哪怕后面全是数字也会被丢弃。

• 输入 "123.45" → 返回 123
• 输入 " 42px" → 返回 42（自动忽略开头空格）
• 输入 "0x1A" → 返回 26（默认支持十六进制，但容易误判）
• 输入 "1e3" → 返回 1（e 不是数字，提前终止）

⚠️ 必须显式传入第二个参数 radix，否则以字符串前缀判断进制："010" 在旧引擎中可能被当八进制解析为 8，现代环境虽默认十进制，但不写 10 仍是隐患。

parseFloat 解析完整浮点数，直到非法字符为止

parseFloat 同样从开头扫描，但能识别小数点、正负号和科学计数法（e 或 E），只要格式合法就继续解析，直到无法构成有效浮点数的字符出现。

• 输入 "123.45abc" → 返回 123.45
• 输入 "-3.14e-2" → 返回 -0.0314
• 输入 " +.5" → 返回 0.5（支持隐式前导零）
• 输入 "2e3.5" → 返回 2000（.5 在 e 后不合法，被截断）

它不支持进制指定，始终按十进制解析；也不跳过中间空格——"12 34" 只取 12，因为空格是非法浮点字符。

更安全的替代方案：Number() 和一元加号

如果目标是严格转换、拒绝含杂质的字符串，Number() 和 + 更可靠：

• Number("123.45") → 123.45
• Number(" 42 ") → 42
• Number("12px") → NaN（整个字符串必须可完全转为数字）
• +"0x1F" → 31（支持十六进制，但不支持八进制前缀 010）

它们对空白更宽容，但对杂字符零容忍——这反而是多数业务场景想要的行为。比如表单校验时，"100元" 理应报错，而不是悄悄变成 100。

实际用哪一种？看你的输入是否“干净”

如果字符串来自用户输入或不可控来源（如 DOM 文本、URL 参数），优先用 Number() 或 +，配合 isNaN() 判断结果有效性；

如果确定是纯数字开头、且只需整数（比如取元素 data-index="23"），parseInt(str, 10) 明确、语义清晰；

如果明确需要提取浮点值且允许后缀（如 CSS 值 "2.5rem"），parseFloat 是唯一选择。

别忘了：所有这些函数遇到空字符串、null、undefined 都会返回 NaN 或 0（parseInt(undefined) 是 NaN，Number(undefined) 是 NaN，parseInt("") 也是 NaN，但 parseFloat("") 是 NaN —— 全部一致，唯独 Number(null) 是 0，这个例外常被忽略。

今天关于《JS字符串转数字方法及parseInt和parseFloat区别》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！