js如何把字符串转数字

方法 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

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