方法 1使用parseInt()parseInt()可以解析字符串并返回整数部分忽略非数字后缀如px。conststr24px;constnumparseInt(str,10);// 第二个参数 10 表示十进制console.log(num);// 输出: 24console.log(typeofnum);// 输出: number整数优点简单直接专为字符串转整数设计。自动忽略非数字后缀如px、em等。注意如果字符串以非数字开头如px24会返回NaN。不推荐省略第二个参数如parseInt(str)因为某些字符串如0x24可能被解析为十六进制。方法 2使用Number() 正则表达式通过正则提取数字部分再用Number()转换。conststr24px;constnumNumber(str.match(/\d/)[0]);// 匹配连续数字console.log(num);// 输出: 24适用场景需要更灵活的字符串处理如提取小数或负数。示例扩展提取小数24.5px→parseFloat(str)。注意如果字符串中没有数字如abcmatch()返回null直接访问[0]会报错。需加保护constmatchstr.match(/\d/);constnummatch?Number(match[0]):0;// 默认值处理方法 3使用replace()移除非数字字符通过正则替换非数字字符为空字符串再转换。conststr24px;constnumNumber(str.replace(/\D/g,));// \D 匹配非数字console.log(num);// 输出: 24优点代码简洁适合简单场景。缺点无法处理负数或小数如-24px或24.5px。方法 4使用Math.floor()/Math.trunc()适用于已知格式如果字符串格式固定如24px可以手动截取数字部分conststr24px;constnumMath.floor(str.slice(0,-2));// 移除最后 2 个字符pxconsole.log(num);// 输出: 24缺点依赖字符串长度不灵活如240px仍需-2但24px和2px需要不同处理。推荐方案通用场景优先使用parseInt(str, 10)简单高效。复杂字符串使用正则表达式如Number(str.match(/\d/)[0])。需要处理小数/负数改用parseFloat()或更复杂的正则。完整示例functionextractNumber(str){constmatchstr.match(/\d/);returnmatch?parseInt(match[0],10):NaN;// 返回整数或 NaN}console.log(extractNumber(24px));// 24console.log(extractNumber(-10em));// -10需调整正则为 /-?\d/console.log(extractNumber(abc));// NaN根据实际需求选择合适的方法即可