JavaScript中字符串轉(zhuǎn)數(shù)字的幾種常見方法
在 JavaScript 中,將字符串轉(zhuǎn)換為數(shù)字有幾種常見方式,包括使用 .map(Number) 和 Number()。以下是詳細的解釋和比較:
1.Number()函數(shù)
作用:將字符串或其他類型的值轉(zhuǎn)換為數(shù)字。
示例:
let str = "123"; let num = Number(str); // 123
特點:
如果字符串不是有效的數(shù)字(如
"123abc"),會返回NaN。可以處理
null(轉(zhuǎn)為0)、undefined(轉(zhuǎn)為NaN)、布爾值(true轉(zhuǎn)為1,false轉(zhuǎn)為0)等。
2..map(Number)
作用:對數(shù)組中的每個元素調(diào)用
Number()函數(shù),將數(shù)組中的字符串批量轉(zhuǎn)換為數(shù)字。示例:
let strArray = ["1", "2", "3"]; let numArray = strArray.map(Number); // [1, 2, 3]
特點:
是
Array.prototype.map和Number函數(shù)的結(jié)合,等價于.map(x => Number(x))。會遍歷數(shù)組,對每個元素調(diào)用
Number()。
其他常見字符串轉(zhuǎn)數(shù)字的方式
parseInt()和parseFloat()
作用:解析字符串中的整數(shù)或浮點數(shù)。
示例:
let str = "123.45"; let intNum = parseInt(str); // 123(整數(shù)部分) let floatNum = parseFloat(str); // 123.45
特點:
parseInt可以指定進制(如parseInt("1010", 2)將二進制字符串轉(zhuǎn)為十進制數(shù)字10)。會忽略字符串開頭的空格,直到找到第一個非空格字符。如果第一個非空格字符不是數(shù)字或符號(
+/-),返回NaN。
一元加運算符 (+)
作用:快速將字符串轉(zhuǎn)為數(shù)字。
示例:
let str = "123"; let num = +str; // 123
特點:
簡潔,但可讀性可能不如
Number()。行為與
Number()完全一致。
Math.floor()、Math.ceil()、Math.round()
作用:將字符串轉(zhuǎn)為數(shù)字并向下取整、向上取整或四舍五入。
示例:
let str = "123.7"; let floorNum = Math.floor(+str); // 123 let ceilNum = Math.ceil(+str); // 124 let roundNum = Math.round(+str); // 124
特點:
通常需要先通過
Number()或+將字符串轉(zhuǎn)為數(shù)字,再調(diào)用這些方法。
對比總結(jié)
| 方法 | 適用場景 | 是否嚴格轉(zhuǎn)換(無效字符串返回 NaN) | 備注 |
|---|---|---|---|
Number() | 單個字符串轉(zhuǎn)數(shù)字 | 是 | 推薦通用方式 |
.map(Number) | 數(shù)組中的字符串批量轉(zhuǎn)數(shù)字 | 是 | 數(shù)組專用 |
parseInt() | 提取字符串中的整數(shù)部分 | 否(會忽略無效后綴) | 可指定進制 |
parseFloat() | 提取字符串中的浮點數(shù)部分 | 否(會忽略無效后綴) | 只能解析十進制 |
+ 運算符 | 快速單個字符串轉(zhuǎn)數(shù)字 | 是 | 行為同 Number() |
Math 相關(guān)方法 | 轉(zhuǎn)換后需要取整 | 是(需先轉(zhuǎn)為數(shù)字) | 通常配合 Number() 或 + 使用 |
示例代碼
// 1. Number()
console.log(Number("123")); // 123
console.log(Number("123abc")); // NaN
// 2. .map(Number)
let strArray = ["1", "2", "3"];
console.log(strArray.map(Number)); // [1, 2, 3]
// 3. parseInt() 和 parseFloat()
console.log(parseInt("123.45")); // 123
console.log(parseFloat("123.45")); // 123.45
// 4. 一元加運算符
console.log(+"123"); // 123
// 5. Math 方法
console.log(Math.floor("123.7")); // 123(隱式轉(zhuǎn)換)
console.log(Math.floor(Number("123.7"))); // 123(顯式轉(zhuǎn)換)注意事項
如果字符串包含非數(shù)字字符:
Number()和+會返回NaN。parseInt()和parseFloat()會盡可能解析前面的數(shù)字部分。
對于數(shù)組批量轉(zhuǎn)換,
.map(Number)是最簡潔的方式。
根據(jù)需求選擇合適的方法!
總結(jié)
到此這篇關(guān)于JavaScript中字符串轉(zhuǎn)數(shù)字的幾種常見方法的文章就介紹到這了,更多相關(guān)js字符串轉(zhuǎn)數(shù)字方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記,內(nèi)容很詳細,感興趣的小伙伴們可以參考一下2016-05-05
用Javascript輕松制作一套簡單的抽獎系統(tǒng)
用Javascript輕松制作一套簡單的抽獎系統(tǒng)...2006-12-12
詳解微信小程序?qū)崿F(xiàn)跑馬燈效果(附完整代碼)
這篇文章主要介紹了微信小程序跑馬燈效果,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript中的this/call/apply/bind的使用及區(qū)別
這篇文章主要介紹了JavaScript中的this/call/apply/bind的使用及區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
獲取css樣式表內(nèi)樣式的js函數(shù)currentStyle(IE),defaultView(FF)
JS從樣式表取值的函數(shù),IE中以currentStyle,firefox中defaultView來獲取,需要的朋友可以參考下。2011-02-02

