首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript字符串转数字

JavaScript把字符串转数字的四种方法

2026-03-21 11:39:44 作者：detayun

本文介绍了4种将字符串转换为数字的方法：parseInt()直接解析整数,忽略非数字后缀,正则提取数字后通过Number()转换,适用于复杂字符串,replace()移除非数字字符,简单但不支持负数/小数以及固定格式下使用Math.floor(),文章通过代码讲解的非常详细,需要的朋友可以参考下

方法 1：使用parseInt()

parseInt() 可以解析字符串并返回整数部分，忽略非数字后缀（如 px）。

const str = '24px';
const num = parseInt(str, 10); // 第二个参数 10 表示十进制

console.log(num); // 输出: 24
console.log(typeof num); // 输出: "number"（整数）

优点：

简单直接，专为字符串转整数设计。
自动忽略非数字后缀（如 px、em 等）。

注意：

如果字符串以非数字开头（如 'px24'），会返回 NaN。
不推荐省略第二个参数（如 parseInt(str)），因为某些字符串（如 '0x24'）可能被解析为十六进制。

方法 2：使用Number()+ 正则表达式

通过正则提取数字部分，再用 Number() 转换。

const str = '24px';
const num = Number(str.match(/\d+/)[0]); // 匹配连续数字

console.log(num); // 输出: 24

适用场景：

需要更灵活的字符串处理（如提取小数或负数）。
示例扩展：提取小数 '24.5px' → parseFloat(str)。

注意：

如果字符串中没有数字（如 'abc'），match() 返回 null，直接访问 [0] 会报错。需加保护：

const match = str.match(/\d+/);
const num = match ? Number(match[0]) : 0; // 默认值处理

方法 3：使用replace()移除非数字字符

通过正则替换非数字字符为空字符串，再转换。

const str = '24px';
const num = Number(str.replace(/\D/g, '')); // \D 匹配非数字

console.log(num); // 输出: 24

优点：

代码简洁，适合简单场景。

缺点：

无法处理负数或小数（如 '-24px' 或 '24.5px'）。

方法 4：使用Math.floor()/Math.trunc()（适用于已知格式）

如果字符串格式固定（如 '24px'），可以手动截取数字部分：

const str = '24px';
const num = Math.floor(str.slice(0, -2)); // 移除最后 2 个字符（'px'）

console.log(num); // 输出: 24

缺点：

依赖字符串长度，不灵活（如 '240px' 仍需 -2，但 '24px' 和 '2px' 需要不同处理）。

完整示例

function extractNumber(str) {
  const match = str.match(/\d+/);
  return match ? parseInt(match[0], 10) : NaN; // 返回整数或 NaN
}

console.log(extractNumber('24px')); // 24
console.log(extractNumber('-10em')); // -10（需调整正则为 /-?\d+/）
console.log(extractNumber('abc')); // NaN

根据实际需求选择合适的方法即可！

到此这篇关于JavaScript把字符串转数字的四种方法的文章就介绍到这了,更多相关JavaScript字符串转数字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！