一、為什么需要字符串轉(zhuǎn)數(shù)字？

在 JavaScript 中，用戶輸入、API 響應(yīng)或者 HTML 組件返回的數(shù)據(jù)通常以字符串形式存在。直接對字符串進(jìn)行數(shù)學(xué)運算可能會導(dǎo)致意想不到的結(jié)果，例如：

console.log("10" + 5); // "105"（字符串拼接）
console.log("10" - 5); // 5（隱式轉(zhuǎn)換）

為避免這種不確定性，我們需要顯式地將字符串轉(zhuǎn)換為數(shù)字。

二、使用 parseInt() 轉(zhuǎn)換整數(shù)

1. parseInt 語法

parseInt(string, radix);

• string：要轉(zhuǎn)換的字符串。
• radix（可選）：基數(shù)（2~36），表示進(jìn)制。

2. 示例代碼

console.log(parseInt("42")); // 42
console.log(parseInt("42px")); // 42（遇到非數(shù)字字符停止解析）
console.log(parseInt("1010", 2)); // 10（二進(jìn)制轉(zhuǎn)換）
console.log(parseInt("0x1A", 16)); // 26（十六進(jìn)制）

3. parseInt 的特點

• 忽略開頭的空格。
• 碰到非數(shù)字字符后停止解析。
• 可以解析不同進(jìn)制的數(shù)值。
• 對于空字符串返回 NaN。

console.log(parseInt("")); // NaN
console.log(parseInt("abc")); // NaN

三、使用 parseFloat() 轉(zhuǎn)換浮點數(shù)

1. parseFloat 語法

parseFloat(string);

2. 示例代碼

console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("3.14abc")); // 3.14
console.log(parseFloat("  42.5")); // 42.5（忽略開頭空格）
console.log(parseFloat("1.23e2")); // 123（科學(xué)計數(shù)法）

3. parseFloat 的特點

• 可以解析小數(shù)點。
• 遇到非數(shù)字字符后停止解析。
• 支持科學(xué)計數(shù)法。

四、使用 Number() 進(jìn)行轉(zhuǎn)換

1. Number 語法

Number(value);

2. 示例代碼

console.log(Number("42")); // 42
console.log(Number("3.14")); // 3.14
console.log(Number("1.23e2")); // 123
console.log(Number(" ")); // 0（空字符串被轉(zhuǎn)換為 0）
console.log(Number("42px")); // NaN（無法解析）

3. Number 的特點

• 只能轉(zhuǎn)換完全有效的數(shù)字字符串。
• 不會忽略非數(shù)字字符。
• 會將空字符串轉(zhuǎn)換為 0，而不是 NaN。

五、使用 + 進(jìn)行隱式轉(zhuǎn)換

1. + 語法

+string;

2. 示例代碼

console.log(+"42"); // 42
console.log(+"3.14"); // 3.14
console.log(+"1.23e2"); // 123
console.log(+" "); // 0
console.log(+"42px"); // NaN

3. + 的特點

• 等價于 Number()。
• 可用于快速轉(zhuǎn)換，代碼更簡潔。
• 不能處理 px、abc 之類的非數(shù)字字符串，否則會返回 NaN。

六、Math.floor()、Math.ceil() 和 Math.round() 結(jié)合 Number()

當(dāng)我們需要轉(zhuǎn)換字符串并取整時，可以結(jié)合 Math.floor()（向下取整）、Math.ceil()（向上取整）和 Math.round()（四舍五入）：

console.log(Math.floor("42.9")); // 42
console.log(Math.ceil("42.1")); // 43
console.log(Math.round("42.5")); // 43

這些方法會先調(diào)用 Number() 進(jìn)行轉(zhuǎn)換，然后進(jìn)行取整。

七、不同方法的對比

八、實際開發(fā)中的最佳實踐

1. 處理用戶輸入

如果要從輸入框獲取數(shù)值并進(jìn)行計算，建議使用 parseFloat() 處理浮點數(shù)，parseInt() 處理整數(shù)。

let userInput = "42.5px";
let number = parseFloat(userInput) || 0; // 遇到 NaN 時默認(rèn)值為 0
console.log(number); // 42.5

2. 確保轉(zhuǎn)換正確

如果字符串是完全數(shù)字，Number() 或 + 是更好的選擇，否則 parseInt() 和 parseFloat() 更靈活。

let value = "42px";
console.log(Number(value)); // NaN
console.log(parseInt(value)); // 42

3. 避免 NaN

使用 isNaN() 進(jìn)行檢測，確保轉(zhuǎn)換結(jié)果有效。

let num = Number("hello");
if (isNaN(num)) {
  console.log("轉(zhuǎn)換失敗");
} else {
  console.log("轉(zhuǎn)換成功: ", num);
}

九、總結(jié)

JavaScript 提供了多種方法將字符串轉(zhuǎn)換為數(shù)字，每種方法都有適用場景：

• parseInt() 適用于解析整數(shù)，可解析不同進(jìn)制。
• parseFloat() 適用于解析浮點數(shù)，支持小數(shù)點和科學(xué)計數(shù)法。
• Number() 和 + 適用于轉(zhuǎn)換完全有效的數(shù)字字符串。
• 結(jié)合 Math 方法 進(jìn)行取整。

以上就是JavaScript字符串轉(zhuǎn)數(shù)字的多種方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JS字符串轉(zhuǎn)數(shù)字的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論