JavaScript中怎么将带小数的字符串转为整数？

一、直接截断小数：使用 parseInt()

parseInt() 是 JavaScript 中最直观的取整函数之一。当传入带小数的字符串时，解析器会从左往右逐个字符解析，遇到第一个无法识别为合法基数数字的字符（例如小数点 . 或字母）就会停止解析，并返回已成功解析的整数部分。

基本用法与基数参数

在调用 parseInt() 时，必须始终显式指定第二个参数（基数 radix）为 10，以避免不同环境下因前缀或兼容性问题引发解析意外：

// 纯小数数字字符串
const str1 = "12.34";
const result1 = parseInt(str1, 10);
console.log(result1); // 输出: 12
console.log(typeof result1); // 输出: "number"

// 负小数数字字符串
const str2 = "-12.78";
const result2 = parseInt(str2, 10);
console.log(result2); // 输出: -12（向零靠拢截断）

特性：自动忽略后置非数字字符

parseInt() 的一个实用特性是能够容忍字符串后部包含非数字内容。例如在处理页面尺寸、CSS 属性值时，输入常常带有单位后缀：

const fontSize = "16.85px";
const intSize = parseInt(fontSize, 10);
console.log(intSize); // 输出: 16（截断小数点及后续单位）

二、两步法：先转数值，再按规则取整

parseInt() 本质上是字符串解析器，其取整方式固定为“向零直接截断”。但在实际业务中，我们往往需要严格的数据校验，或者需要四舍五入、向下取整等不同数学规则。此时更规范的做法是先将字符串转换为浮点数值，再调用相应的 Math 数学函数。

1. 截断取整：Math.trunc(Number(str))

Number(str) 负责将纯数字字符串转换为标准浮点数，若字符串中包含除空白符外的非数字字符（如 "12.5px"），会严格返回 NaN，利于排查脏数据。Math.trunc() 则用于直接移除数值的小数部分：

const valStr = "42.99";
const intVal = Math.trunc(Number(valStr));
console.log(intVal); // 输出: 42

// 遇到脏数据时能严格报错
console.log(Math.trunc(Number("42.99px"))); // 输出: NaN

2. 四舍五入：Math.round(Number(str))

当业务逻辑要求按常规算术规则舍入到最接近的整数时，使用 Math.round()：

const priceStr1 = "19.49";
const priceStr2 = "19.50";

console.log(Math.round(Number(priceStr1))); // 输出: 19
console.log(Math.round(Number(priceStr2))); // 输出: 20

3. 向下与向上取整：Math.floor() 与 Math.ceil()

Math.floor() 总是向数值更小的方向（数轴负无穷方向）取整，常用于列表分页、网格单元计算；而 Math.ceil() 总是向更大方向取整：

const score = "8.2";
console.log(Math.floor(Number(score))); // 输出: 8
console.log(Math.ceil(Number(score)));  // 输出: 9

三、正负数在各方法中的行为差异

初学者容易混淆 parseInt / Math.trunc 与 Math.floor 的区别。对于正数而言，它们的结果往往一致；但在处理负小数时，行为会产生关键分流：

• 向零截断（parseInt 与 Math.trunc）：直接抹去小数点后的内容。对于 -12.8，取整后为 -12。
• 向下取整（Math.floor）：向数值更小的负数方向推移。对于 -12.8，比它更小的相邻整数是 -13。

const negativeStr = "-15.75";

console.log(parseInt(negativeStr, 10));        // 输出: -15（截断小数位）
console.log(Math.trunc(Number(negativeStr))); // 输出: -15（向零靠拢）
console.log(Math.floor(Number(negativeStr))); // 输出: -16（向负无穷延伸）
console.log(Math.round(Number(negativeStr))); // 输出: -16（四舍五入）

四、常见误区与边界陷阱

在处理带小数的字符串转换时，部分看似简洁的技巧存在隐性约束，若不注意边界条件容易导致难以察觉的线上缺陷。

1. 误区：使用位运算符（~~str 或 str | 0）

双波浪号 ~~str 或按位或 str | 0 是一种广为人知的简写技巧。它依赖 JavaScript 引擎在执行位运算时将操作数强制转换为 32 位有符号整数的机制，自然舍弃小数位。

这种写法在纯小数且数值处于 [-2147483648, 2147483647] 范围内确实成立，但一旦字符串代表的数值超过 32 位整数边界（如大型订单号、微秒级时间戳 "3000000000.5"），数值将发生符号位翻转，变成毫无意义的负数：

// 正常范围
console.log(~~"128.65"); // 输出: 128

// 超出 32 位整数上限时产生溢出
console.log(~~"3000000000.5"); // 输出: -1294967296（严重计算错误！）
console.log(Math.trunc(Number("3000000000.5"))); // 输出: 3000000000（安全准确）

2. 科学计数法陷阱：parseInt("1e5", 10)

如果后端接口或计算过程返回了科学计数法格式的小数字符串（例如 "1.5e3" 或 "1e5"），parseInt() 在解析到字符 e 时会认为后续字符非法而立即停下，只返回前面的基数：

console.log(parseInt("1.5e3", 10));        // 输出: 1（错误！丢失了千位量级）
console.log(Math.trunc(Number("1.5e3"))); // 输出: 1500（正确还原指数数值）

3. 空字符串与非纯数字串

对于空字符串 ""，Number("") 会将其转换为 0，而 parseInt("", 10) 会返回 NaN。在实际业务中，空值往往属于未输入或缺失数据，直接隐式变为 0 容易引发业务逻辑偏差。建议在转换前先进行校验：

function parseDecimalToInt(str) {
  if (typeof str !== "string" || str.trim() === "") {
    return NaN;
  }
  const num = Number(str.trim());
  return isNaN(num) ? NaN : Math.trunc(num);
}

五、转换方案选型速查

综合前述分析，可以根据输入数据的特征和业务诉求，直接对照下表选择最稳健的转换策略：

六、总结与落地建议

要将带小数的字符串准确转换为整数，不必盲目追求写法简短，应根据具体上下文选用契合语义的函数：

1. 如果是纯净的数字字符串输入，优先采用 Number() 配合 Math.trunc() 或 Math.round()，保持对异常字符的敏感性。
2. 如果处理的是 DOM 样式或表单混合输入（如附带单位后缀），则使用 parseInt(str, 10)，并务必指定基数 10。
3. 面对不确定范围的数值计算，应避免使用 ~~ 或 | 0 等 32 位位运算符，防止大数溢出产生严重计算偏差。