JS字符串转整数：parseInt与Number的区别及用法

作者：橙子

时间：2026-11-03

深入对比JavaScript中parseInt与Number在字符串转整数场景下的核心机制、行为差异、进制支持、特殊边界值及实战选型指南。

文章目录

主题：JavaScript 核心类型转换阅读时长：约 6 分钟适用规范：ECMAScript 5+

JS字符串转整数：parseInt与Number的区别及用法 — 图 0：JS 字符串转整数双轨机制概览（题图）

在 JavaScript 中将字符串转换为整数，最常用的两种内置途径是 parseInt() 与 Number()。两者的核心差异在于设计目标与解析原则：parseInt() 是“容差逐字符解析器”，专门用于从文本中自左向右提取合法整数，遇到非数字字符自动截断；而 Number() 是“严格类型转换器”，要求整个字符串必须完全符合数值字面量规则，否则直接返回 NaN。理解两者的底层差异，是避免线上出现莫名 0 或 NaN 隐蔽 Bug 的关键。

一、parseInt 的核心机制与正确用法

parseInt(string, radix) 的初衷是从字符串内容中提取数字整数。它的执行并不是一次性校验整个字符串，而是采用自左向右逐字扫描的方式。

1. 扫描与截断规则

当 JavaScript 引擎执行 parseInt 时，内部遵循以下严格步骤：

忽略前导空格：字符串首部的所有空格（包括制表符、换行符等）均会被自动跳过。
捕获可选符号：紧接着读取首个非空白字符，若为加号 + 或减号 -，则记录其正负符号位。
逐字符合法性扫描：根据指定的基数（radix），检查后续字符是否属于当前进制允许的字符范围（十进制为 0-9，十六进制为 0-9 及 a-f）。
遇非法字符立即截断：一旦扫描到首个不合法的字符（如字母、标点符号、空格、小数点 .），扫描立即停止，并将此前已经累积的数字组合成整数返回。
首字符失效即判无效：如果紧跟在符号位后的第一个非空白字符就不是合法基数字符，则直接返回 NaN。

// 示例 1：提取带单位的数值（常见于 CSS/DOM 操作）
parseInt("42px", 10);        // 输出示例: 42
parseInt("  -120rem", 10);   // 输出示例: -120

// 示例 2：遇到小数点直接截断（非四舍五入）
parseInt("15.99", 10);       // 输出示例: 15

// 示例 3：首字符非法则直接返回 NaN，不向后寻找
parseInt("width: 300px", 10); // 输出示例: NaN

2. 为什么必须显式传入第二个参数 radix？

parseInt 接收的第二个参数 radix 表示进制基数，取值范围为 2 到 36。在实际开发中，强烈建议无论何时都明确书写基数 10，即始终写为 parseInt(str, 10)。

历史陷阱与隐式推断规则：若省略 radix，JavaScript 会尝试根据字符串前缀自动推导：以 0x 或 0X 开头会被推导为 16 进制；以 0 开头在早期旧引擎（ES3 规范）中会被推导为 8 进制（导致如 parseInt("08") 返回 0）。尽管现代 ES5+ 规范已取消了前导 0 的八进制隐式推导，但显式声明 radix = 10 能够从源头上消除不同宿主环境的行为差异与代码歧义。

二、Number 的类型转换机制与转整方法

Number(value) 是 JavaScript 的全局构造函数兼类型转换函数。当不使用 new 关键字调用时，它执行的是 ECMAScript 规范定义的 ToNumber 抽象操作。

1. 整体校验与严格转换

与 parseInt 容忍后缀不同，Number() 对字符串的格式要求非常严密：除首尾的空白符外，整个字符串必须完全构成一个合法的数值字面量。只要其中夹带了任何多余字符，转换就会失败并返回 NaN。

// 示例 1：纯数字字符串正常转换
Number("123");       // 输出示例: 123
Number("  456  ");   // 输出示例: 456 （支持首尾空白）

// 示例 2：夹带任何非数字杂质均返回 NaN
Number("42px");      // 输出示例: NaN （不会像 parseInt 那样截取 42）
Number("12.3.4");    // 输出示例: NaN

// 示例 3：支持科学计数法与进制字面量
Number("1e3");       // 输出示例: 1000
Number("0x1f");      // 输出示例: 31 （十六进制字面量）

2. 如何配合 Number 得到安全整数？

需要特别注意，Number("42.8") 的输出是浮点数 42.8，而非整数。如果业务目标是得到一个整数，必须配合取整函数处理：

Math.trunc(Number(str))：直接抹去小数部分（截断取整，行为与 parseInt 最接近）。
Math.floor(Number(str))：向下取整（注意负数时如 -4.2 会变成 -5）。
Number.isInteger()：在转换后检验是否为纯整数，适用于严格禁止小数输入的表单场景。

三、parseInt 与 Number 的六大核心差异

为了在编码中做出准确选择，下表对 parseInt 和 Number 在各类典型输入下的行为表现进行了系统梳理：

比较维度	`parseInt(str, 10)`	`Number(str)`	开发影响与说明
解析策略	逐字符扫描，遇到非法字符截断	严格全局校验，要求整体完全合法	提取带单位文本用 parseInt，纯数字校验用 Number
带单位/后缀（如 "20px"）	`20`（成功提取有效整数）	`NaN`（整体含非法字母直接报错）	DOM/CSS 属性解析推荐 parseInt
空字符串 `""` / 纯空格	`NaN`（无有效数字，符合直觉）	`0`（ECMAScript 规范强制转为 0）	高危差异！表单空输入用 Number 极易误判为 0
浮点数字符串（如 "12.8"）	`12`（直接截断小数位，保留整数）	`12.8`（完整保留浮点数精度）	若用 Number 需配合 `Math.trunc` 才能转整数
科学计数法（如 "1e4"）	`1`（将 'e' 视作非法字符终止截断）	`10000`（规范支持科学计数法字面量）	科学计数法字符串切勿直接使用 parseInt 解析
非字符串输入（如 null、true）	`NaN`（先隐式转字符串 "null" 再解析）	`0` / `1`（按规范 ToNumber 转换）	类型安全性不同，输入非字符串时结果大相径庭

四、日常开发中最容易踩的四个陷阱

1. 空字符串被 Number 隐式转为 0

这是表单验证中最常见的线上隐患。在 HTML 表单中，未填写的输入框获取其 input.value 得到的是空字符串 ""。

// 错误示范：用户未填写商品库存数量，直接转数字
const userQty = ""; // 表单空输入
const qty = Number(userQty); 
console.log(qty); // 输出示例: 0 （导致系统错误认为库存是0，而非未填写）

// 正确防御：转换前先做空值与有效性判断
if (userQty.trim() === "") {
  throw new Error("请填写有效数量");
}

2. 极小浮点数的科学计数法陷阱

当把一个极小的数字传给 parseInt 时，JavaScript 会首先把数值转换为字符串。如果数值小于 1e-6，默认会被序列化为科学计数法形式：

const tiny = 0.0000005; // 实际字符串表示为 "5e-7"
parseInt(tiny, 10);      // 输出示例: 5 （截断到 'e' 前的 5，导致结果完全偏离！）
Math.trunc(tiny);        // 输出示例: 0 （正确做法：对数字类型直接使用 Math API）

3. Array.prototype.map(parseInt) 经典翻车

很多初学者尝试使用 ['1', '2', '3'].map(parseInt) 批量转整数，结果得到 [1, NaN, NaN]。

原因剖析：Array.prototype.map 在调用回调时，会传入三个参数：(item, index, array)。而 parseInt 接收的第二个参数恰好是 radix（进制）。
循环第一轮：parseInt('1', 0) ➔ radix 为 0 按十进制解析，输出 1；
循环第二轮：parseInt('2', 1) ➔ radix 为 1 是非法进制（只支持 2~36），输出 NaN；
循环第三轮：parseInt('3', 2) ➔ 二进制中只有 0 和 1，'3' 为非法字符，输出 NaN。
修复方案：显式使用箭头函数传参：['1', '2', '3'].map(str => parseInt(str, 10)) 或 ['1', '2', '3'].map(Number)。

五、实战选型指南与健壮封装

在实际业务开发中，选择哪个工具取决于输入数据的确定性以及对脏数据的容忍策略：

文本提取场景（优先选择 parseInt）：处理样式计算、从 DOM 属性提取带单位尺寸（如 "24px"、"100ms"），或者需要解析十六进制、二进制文本时，使用 parseInt(str, 10) 是首选。
严格校验场景（优先选择 Number）：对于金融金额、表单填写的纯数字、接口传入的 ID 等，任何掺杂的字母都属于非法数据，此时应使用 Number() 配合校验，以确保及时捕获异常。

通用健壮转整函数范式

在企业级业务中，推荐封装统一的安全转换函数，兼顾空值防御、去除空白与默认值兜底：

/**
 * 将输入安全转换为十进制整数
 * @param {string|number} val - 输入值
 * @param {number} [fallback=0] - 转换失败时的安全兜底值
 * @returns {number} 转换后的整数
 */
function toSafeInteger(val, fallback = 0) {
  if (val === null || val === undefined) return fallback;
  
  const str = String(val).trim();
  if (str === "") return fallback; // 防御空字符串误转为 0 的潜在业务歧义
  
  const parsed = parseInt(str, 10);
  return Number.isNaN(parsed) ? fallback : parsed;
}

// 测试验证
console.log(toSafeInteger("  88px  ")); // 输出示例: 88
console.log(toSafeInteger("", 0));       // 输出示例: 0
console.log(toSafeInteger("invalid", -1)); // 输出示例: -1