如何使用 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) 。