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

方法 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' 需要不同处理）。

推荐方案

• 通用场景：优先使用 parseInt(str, 10)，简单高效。
• 复杂字符串：使用正则表达式（如 Number(str.match(/\d+/)[0])）。
• 需要处理小数/负数：改用 parseFloat() 或更复杂的正则。

完整示例

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字符串转数字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论