方法 1：使用parseInt()

parseInt() 可以解析字符串并返回整數(shù)部分，忽略非數(shù)字后綴（如 px）。

const str = '24px';
const num = parseInt(str, 10); // 第二個參數(shù) 10 表示十進制

console.log(num); // 輸出: 24
console.log(typeof num); // 輸出: "number"（整數(shù)）

優(yōu)點：

• 簡單直接，專為字符串轉(zhuǎn)整數(shù)設(shè)計。
• 自動忽略非數(shù)字后綴（如 px、em 等）。

注意：

• 如果字符串以非數(shù)字開頭（如 'px24'），會返回 NaN。
• 不推薦省略第二個參數(shù)（如 parseInt(str)），因為某些字符串（如 '0x24'）可能被解析為十六進制。

方法 2：使用Number()+ 正則表達式

通過正則提取數(shù)字部分，再用 Number() 轉(zhuǎn)換。

const str = '24px';
const num = Number(str.match(/\d+/)[0]); // 匹配連續(xù)數(shù)字

console.log(num); // 輸出: 24

適用場景：

• 需要更靈活的字符串處理（如提取小數(shù)或負(fù)數(shù)）。
• 示例擴展：提取小數(shù) '24.5px' → parseFloat(str)。

注意：

• 如果字符串中沒有數(shù)字（如 'abc'），match() 返回 null，直接訪問 [0] 會報錯。需加保護：

const match = str.match(/\d+/);
const num = match ? Number(match[0]) : 0; // 默認(rèn)值處理

方法 3：使用replace()移除非數(shù)字字符

通過正則替換非數(shù)字字符為空字符串，再轉(zhuǎn)換。

const str = '24px';
const num = Number(str.replace(/\D/g, '')); // \D 匹配非數(shù)字

console.log(num); // 輸出: 24

優(yōu)點：

• 代碼簡潔，適合簡單場景。

缺點：

• 無法處理負(fù)數(shù)或小數(shù)（如 '-24px' 或 '24.5px'）。

方法 4：使用Math.floor()/Math.trunc()（適用于已知格式）

如果字符串格式固定（如 '24px'），可以手動截取數(shù)字部分：

const str = '24px';
const num = Math.floor(str.slice(0, -2)); // 移除最后 2 個字符（'px'）

console.log(num); // 輸出: 24

缺點：

• 依賴字符串長度，不靈活（如 '240px' 仍需 -2，但 '24px' 和 '2px' 需要不同處理）。

推薦方案

• 通用場景：優(yōu)先使用 parseInt(str, 10)，簡單高效。
• 復(fù)雜字符串：使用正則表達式（如 Number(str.match(/\d+/)[0])）。
• 需要處理小數(shù)/負(fù)數(shù)：改用 parseFloat() 或更復(fù)雜的正則。

完整示例

function extractNumber(str) {
  const match = str.match(/\d+/);
  return match ? parseInt(match[0], 10) : NaN; // 返回整數(shù)或 NaN
}

console.log(extractNumber('24px')); // 24
console.log(extractNumber('-10em')); // -10（需調(diào)整正則為 /-?\d+/）
console.log(extractNumber('abc')); // NaN

根據(jù)實際需求選擇合適的方法即可！

到此這篇關(guān)于JavaScript把字符串轉(zhuǎn)數(shù)字的四種方法的文章就介紹到這了,更多相關(guān)JavaScript字符串轉(zhuǎn)數(shù)字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論