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

一、parseInt 的解析原理与执行机制

parseInt(string, radix) 的定位是“从文本中读取整数”。它的执行逻辑并不是校验整段文本，而是尽可能从开头提取有效数字。其内部运行大致分为以下步骤：

1. 去除前导空格：自动忽略字符串开头的空格、制表符（\t）以及换行符。
2. 解析正负号：识别首个非空字符是否为 + 或 -，并据此决定返回数值的符号。
3. 确定基数（radix）：若显式传入了 radix（取值范围 2 到 36），则按照对应进制识别有效字符；若未传入，且以 0x 或 0X 开头，则按十六进制解析，其余情况均按十进制解析。
4. 逐字符提取与截断：从左往右连续读取字符。一旦遇到在当前基数下不合法的字符（如十进制下的字母 p、小数点 .、空格等），解析器立即停止读取，并将前面已经提取到的字符合成整数返回。若第一个字符就是非法字符，则返回 NaN。

// 示例 1：parseInt 典型用法与提取表现
console.log(parseInt("120px", 10));    // 120 (遇到 'p' 停止)
console.log(parseInt("  -42rem", 10));  // -42 (去前导空格并保留负号)
console.log(parseInt("42.85", 10));    // 42 (遇到小数点 '.' 停止解析，实现向下截断)
console.log(parseInt("width: 20", 10));// NaN (首字符 'w' 为非法字符)
console.log(parseInt("", 10));         // NaN (无任何有效数字)

二、Number 的转换机制与整型处理

Number(value) 是标准的 ECMAScript 类型转换函数。它不会对字符串做“局部提取”，而是把输入当作完整的数值表达式进行严格求值。转换过程遵循以下规则：

• 去除首尾空白：修剪字符串两端的所有空白字符。
• 空串特殊规则：若去除空格后是空字符串 ""，Number("") 的规范返回值是 0。在需要确保用户输入了具体数字的场景下，这往往会掩盖“未填表单”的逻辑缺陷。
• 全字匹配数值字面量：字符串必须从头到尾完整符合数字格式，支持纯整数、小数、科学计数法（如 "1e3" 结果为 1000）、以及十六进制（0x）、二进制（0b）、八进制（0o）前缀。
• 遇杂质即返 NaN：一旦字符串中包含任何非语法允许的字符（例如 "100px"、"12_00"、"12a3"），整个转换立刻失败并返回 NaN。

// 示例 2：Number 严格转换表现
console.log(Number("120"));      // 120 (纯数字转换成功)
console.log(Number("120px"));    // NaN (包含 'px'，拒绝转换)
console.log(Number(""));         // 0 (空字符串转为 0，需格外警惕)
console.log(Number("   "));      // 0 (纯空格同样转为 0)
console.log(Number("42.85"));    // 42.85 (完整保留浮点小数)
console.log(Number("1e3"));      // 1000 (识别科学计数法)

由于 Number("42.85") 会保留小数，若目标是得到一个整数，必须配合取整函数使用：

// 配合 Math.trunc 丢弃小数部分
const str = "42.85";
const num = Number(str);
const intVal = Number.isNaN(num) ? NaN : Math.trunc(num); // 42

三、parseInt 与 Number 的核心区别与边界条件

在实际项目中，二者的差别主要体现在以下几个边界维度：

1. 非纯数字后缀的处理能力

这是二者最显著的特征区别。parseInt("24px", 10) 会返回 24，因为遇到字母后自动截断；而 Number("24px") 直接返回 NaN。当需要从 CSS 样式字符串（如 fontSize = "16px"）中提取纯数字时，parseInt 是天然适配的选择。

2. 空字符串与纯空格的处理

空字符串 "" 和仅含空格的字符串 " "：

• parseInt("", 10) 返回 NaN，忠实反映“没有提取到任何有效整数”；
• Number("") 返回 0。如果表单项“年龄”或“库存”为空，直接使用 Number() 可能会把未填误判为数值 0，引发业务逻辑错误。

3. 小数点与浮点截断

对于 "15.99"：

• parseInt("15.99", 10) 在读取到小数点 '.' 时终止扫描，直接输出整数 15；
• Number("15.99") 解析出浮点数 15.99，若直接使用并不符合“转为整数”的诉求。

4. 科学计数法支持

parseInt("1e3", 10) 得到的是 1，因为十进制模式下字母 e 被视作非数字字符截断；而 Number("1e3") 会正确返回 1000。

5. 非字符串输入（null、undefined、布尔值）

若变量可能并非字符串：

• parseInt(null) 内部先执行 String(null) 得到 "null"，首字符为 'n'，因此返回 NaN；
• Number(null) 按照语言规范强制转换为 0；
• Number(true) 返回 1，而 parseInt(true) 返回 NaN。

四、适用场景与选型指南

场景 1：解析包含单位的尺寸或文本（优先使用 parseInt）

在处理 DOM 样式、画布度量或来自外部文本的带单位数据时，字符串往往带有 px、pt、em 等后缀。

// 获取元素计算样式并提取像素数值
const elemWidth = "320px";
const widthInt = parseInt(elemWidth, 10); // 320

场景 2：表单校验与严格整型解析（优先使用校验 + Number）

在金融转账金额、用户 ID、购买数量等关键输入场景下，必须杜绝诸如 "100abc" 这类被误当成 100 成功提交的情况。应当结合严格校验：

function parseStrictPositiveInteger(input) {
  if (typeof input !== "string") return null;
  const trimmed = input.trim();
  // 排除空串与空格
  if (trimmed === "") return null;
  
  const num = Number(trimmed);
  // 必须是有效数字且为整数
  if (!Number.isInteger(num) || num <= 0) {
    return null; // 校验失败
  }
  return num;
}

console.log(parseStrictPositiveInteger("100"));    // 100
console.log(parseStrictPositiveInteger("100px"));  // null (拒绝脏数据)
console.log(parseStrictPositiveInteger(""));       // null (拒绝空串)
console.log(parseStrictPositiveInteger("12.5"));   // null (拒绝非整数)

场景 3：多进制数值转换（优先使用 parseInt）

当需要将十六进制颜色值、二进制掩码字符串转换为十进制整数时，parseInt 是最简便的方案：

// 将十六进制色值通道转为 0-255 整数
const hexChannel = "FF";
const r = parseInt(hexChannel, 16); // 255

// 将二进制权限字符串转为整数
const binPermission = "1011";
const perm = parseInt(binPermission, 2); // 11

五、常见避坑要点

1. Array.map 与 parseInt 的经典陷阱

在对数组中的字符串做批量转换时，切勿直接将 parseInt 作为回调函数传递：

// 错误用法
const result = ["1", "2", "3"].map(parseInt);
console.log(result); // [1, NaN, NaN]

// 原因分析：
// map 回调接收三个参数：(element, index, array)
// 此时 index 被当成了 parseInt 的 radix 参数：
// parseInt("1", 0) -> 1 (0 等同于默认 10 进制)
// parseInt("2", 1) -> NaN (不存在 1 进制)
// parseInt("3", 2) -> NaN (2 进制下只允许 0 和 1)

// 正确写法：使用箭头函数显式传参或使用 Number
const fixedResult1 = ["1", "2", "3"].map(val => parseInt(val, 10)); // [1, 2, 3]
const fixedResult2 = ["1", "2", "3"].map(Number); // [1, 2, 3]

2. 超大整数超出安全范围

无论是 parseInt 还是 Number，其返回结果均为双精度 64 位浮点数。当转换超过 Number.MAX_SAFE_INTEGER（9007199254740991，即 2⁵³ - 1）的超长整数字符串（如后端返回的 64 位雪花算法 Snowflake ID）时，会出现精度丢失。

// 精度丢失示例
const largeId = "9007199254740993";
console.log(parseInt(largeId, 10)); // 9007199254740992 (丢失精度)

// 解决方案：使用 BigInt
const bigIntVal = BigInt(largeId);  // 9007199254740993n