如何使用 JavaScript 从数字 + 度量单位字符串中提取数字？

Question

如果我有这个字符串

str = "22px";

如何仅提取数字 22？ 谢谢。

Answer 1

你可以试试 str.match(/\\d+/);

Answer 2

如果你想要一个实际的数字，你应该尝试 parseInt()。 它会为你取下“px”。

str = "22px";

num = parseInt(str, 10); // pass in the radix for safety :)

assert(num === 22);

Answer 3

这是一个将值与单位分开的正则表达式。 它也适用于负值和十进制数：

str.match(/(-?[\d.]+)([a-z%]*)/)

正则表达式解释：

• (-?[\\d.]+) .. 获取可选的“-”后跟数字或点
• ([az%]*) .. 查找直接跟在数字后面的所有字母或 % 符号

这是一个返回特定部分的示例函数：

function parseVal(str) {
    res = str.match(/(-?[\d.]+)([a-z%]*)/);
    return {
        val: parseFloat(res[1]),
        unit: res[2]
    }
}

parseVal( '12px' )               // { val: 12, unit: 'px' }
parseVal( '-20.5%' )             // { val: -20.5, unit: '%' }
parseVal( '22.75em' )            // { val: 22.75, unit: 'em' }
parseVal( '1234' )               // { val: 1234, unit: '' }
parseVal( 'margin-top: -50px;' ) // { val: -50, unit: 'px' }

上面的最后一个示例显示了正则表达式的“智能”程度：它忽略开头的所有非数字值和结尾的多余字符 - 即margin-top:和; 被剥光

笔记

正则表达式非常简单。 当它收到无效值时，它会返回意想不到的结果：

parseVal("...")           // { val: NaN, unit: "" }
parseVal("2.3.4.5pxpxpx") // { val: 2.3, unit: "pxpxpx" }
parseVal("dummy")         // TypeError!

Answer 4

试试这个...

parseInt("22px");

Answer 5

"22px".substring(0,2); // returns "22"

但这仅适用于数字始终为 2 位数的情况。

Answer 6

我想你可以去str.substring(0, 2) 。