在JavaScript中把"123 asdf"轉(zhuǎn)化成數(shù)字的幾種方法
更新時間：2026年02月09日 08:36:49 作者：Never_Satisfied
文章詳細介紹了在JavaScript中將字符串轉(zhuǎn)換為數(shù)字的幾種方法,包括parseInt()、parseFloat()、Number()以及正則表達式,每種方法都有其特點和適用場景,需要的朋友可以參考下
在 JavaScript 中，將字符串 "123 asdf" 轉(zhuǎn)換為數(shù)字有幾種方法，每種方法的結(jié)果和原理不同：
1.parseInt()- 最常用的方法
const str = "123 asdf"; const num = parseInt(str); // 123 console.log(num); // 123 console.log(typeof num); // "number"
特點：
- 解析字符串開頭的數(shù)字，直到遇到第一個非數(shù)字字符
- 忽略字符串開頭的空格
- 能識別整數(shù)，遇到小數(shù)點、字母或其他字符會停止解析
- 如果字符串以非數(shù)字開頭，返回
NaN
parseInt("123 asdf"); // 123
parseInt("123.45 asdf"); // 123（整數(shù)部分）
parseInt("asdf 123"); // NaN
parseInt(" 456 abc"); // 456（忽略空格）
2.parseFloat()- 解析浮點數(shù)
const str = "123.45 asdf"; const num = parseFloat(str); // 123.45 console.log(num); // 123.45
特點：
- 解析浮點數(shù)，能識別第一個小數(shù)點
- 同樣在遇到非數(shù)字字符（除了第一個小數(shù)點）時停止
parseFloat("123 asdf"); // 123
parseFloat("123.45 asdf"); // 123.45
parseFloat("123.45.67"); // 123.45（只識別第一個小數(shù)點）
parseFloat("abc 123"); // NaN
3.Number()或一元加號運算符
const str = "123 asdf"; // Number() 函數(shù) const num1 = Number(str); // NaN // 一元加號運算符 const num2 = +str; // NaN
特點：
- 要求整個字符串都是有效的數(shù)字表示
- 對于
"123 asdf"會返回NaN（因為含有非數(shù)字字符）
Number("123"); // 123
Number("123.45"); // 123.45
Number("123 asdf"); // NaN（整個字符串必須都是數(shù)字）
+"123"; // 123
+"123 asdf"; // NaN
4.其他轉(zhuǎn)換方法
// Math.floor() - 向下取整
Math.floor("123 asdf"); // NaN
// 雙波浪號 ~~ - 按位非（僅整數(shù)）
~~"123 asdf"; // 0（轉(zhuǎn)換失敗）
// 使用正則表達式提取數(shù)字
const str = "123 asdf";
const match = str.match(/\d+/);
const num = match ? parseInt(match[0]) : 0; // 123
// 使用正則提取數(shù)字（包括小數(shù)）
const num2 = parseFloat(str.match(/\d+\.?\d*/)); // 123
總結(jié)對比
| 方法 | 輸入 "123 asdf" | 輸入 "123.45 asdf" | 輸入 "asdf 123" | 特點 |
|---|---|---|---|---|
parseInt() | 123 | 123 | NaN | 提取開頭的整數(shù) |
parseFloat() | 123 | 123.45 | NaN | 提取開頭的浮點數(shù) |
Number() | NaN | NaN | NaN | 要求整個字符串是數(shù)字 |
+ 運算符 | NaN | NaN | NaN | 同 Number() |
| 正則提取 | 123 | 123.45 | 123 | 靈活但代碼較多 |
推薦使用
對于 "123 asdf" 這類字符串：
- 獲取開頭的整數(shù) →
parseInt(str) - 獲取開頭的浮點數(shù) →
parseFloat(str) - 安全轉(zhuǎn)換（帶默認值）：
function safeParseInt(str, defaultValue = 0) {
const num = parseInt(str);
return isNaN(num) ? defaultValue : num;
}
console.log(safeParseInt("123 asdf")); // 123
console.log(safeParseInt("abc")); // 0
console.log(safeParseInt("abc", 100)); // 100
注意事項
- 使用
parseInt()時最好指定基數(shù)，避免八進制解析問題：
parseInt("010"); // 10（現(xiàn)代JS）或8（舊環(huán)境）
parseInt("010", 10); // 10（推薦指定基數(shù)）
- 檢查轉(zhuǎn)換結(jié)果是否為有效數(shù)字：
const num = parseInt("123 asdf");
if (!isNaN(num)) {
console.log("轉(zhuǎn)換成功:", num);
}
對于 "123 asdf"，最合適的方法是 parseInt() 或 parseFloat()，它們會解析字符串開頭的數(shù)字部分。
到此這篇關(guān)于在JavaScript中把"123 asdf"轉(zhuǎn)化成數(shù)字的幾種方法的文章就介紹到這了,更多相關(guān)JavaScript把"123 asdf"轉(zhuǎn)成數(shù)字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于Javascript與iframe的那些事兒
iframe 很多網(wǎng)站都在用，雖然方便開發(fā)與維護（可能同時有幾個頁面調(diào)用同一個 iframe ），不過卻存在安全問題2013-07-07
這篇文章主要介紹了js如何采用delete實現(xiàn)所謂的繼承，下面有個不錯的示例，大家可以參考下2014-05-05
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)滾動條事件的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
讓IDE識別webpack的別名alias的實現(xiàn)方法
這篇文章主要介紹了讓IDE識別webpack的別名alias的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了微信小程序底部彈出框封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS實現(xiàn)鼠標滑過顯示邊框的菜單效果,涉及javascript響應(yīng)鼠標事件動態(tài)修改頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
使用js實現(xiàn)按鈕控制文本框加1減1應(yīng)用于小時+分鐘
正如標題所言使用js實現(xiàn)按鈕控制文本框加1減1，此類主要應(yīng)用于小時+分鐘，下面有個不錯的示例，喜歡的朋友可以參考下2013-12-12
這篇文章主要為大家詳細介紹了微信小程序獲取手機驗證碼的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript實現(xiàn)Sleep函數(shù)的代碼
大家知道，JavaScript中沒有內(nèi)置我們常用的sleep()函數(shù)，只有定時器setTimeout()和循環(huán)定時器setInterval()2007-03-03
JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例,可以實現(xiàn)逼真模擬手機撥號盤界面并實現(xiàn)點擊輸入對應(yīng)號碼的功能,需要的朋友可以參考下2015-05-05