如何使用JavaScript將字符串轉換為數字 | Tech Wiki Online

如何使用JavaScript將字符串轉換為數字

學習如何使用JavaScript將字符串轉換為數字

JavaScript提供了多種將字符串值轉換為數字的方法。

最佳方法：使用Number對象

我個人認為最好的方法是使用Number對象，在非構造函數上下文中使用（不使用new關鍵字）：

const count = Number('1234') //1234

這也會處理小數。

Number是一個可以執行多個操作的包裝對象。如果我們使用構造函數（new Number("1234")），它將返回一個Number對象而不是數字值，所以要注意。

注意數字之間的分隔符：

Number('10,000') //NaN
Number('10.00') //10
Number('10000') //10000

如果需要解析帶有小數分隔符的字符串，請改用Intl.NumberFormat。

其他方法

使用parseInt()和parseFloat()

對於整數，另一個很好的解決方案是調用parseInt()函數：

const count = parseInt('1234', 10) //1234

不要忘記第二個參數，即基數，對於十進制數字始終為10，否則轉換可能會嘗試猜測基數並產生意外結果。

parseInt()嘗試從不僅包含數字的字符串中獲取數字：

parseInt('10 lions', 10) //10

但是，如果字符串不以數字開頭，將返回NaN（Not a Number）：

parseInt("I'm 10", 10) //NaN

與Number一樣，它在數字之間的分隔符上不可靠：

parseInt('10,000', 10) //10 ❌
parseInt('10.00', 10) //10 ✅（被視為小數，被截斷）
parseInt('10.000', 10) //10 ✅（被視為小數，被截斷）
parseInt('10.20', 10) //10 ✅（被視為小數，被截斷）
parseInt('10.81', 10) //10 ✅（被視為小數，被截斷）
parseInt('10000', 10) //10000 ✅

如果要保留小數部分而不僅僅獲得整數部分，請使用parseFloat()。請注意，與parseInt()不同，它只接受一個參數 - 要轉換的字符串：

parseFloat('10,000') //10 ❌
parseFloat('10.00') //10 ✅（被視為小數，被截斷）
parseFloat('10.000') //10 ✅（被視為小數，被截斷）
parseFloat('10.20') //10.2 ✅（被視為小數）
parseFloat('10.81') //10.81 ✅（被視為小數）
parseFloat('10000') //10000 ✅

使用+

一種”技巧”是在字符串之前使用一元運算符+：

+'10,000' //NaN ✅
+'10.000' //10 ✅
+'10.00' //10 ✅
+'10.20' //10.2 ✅
+'10.81' //10.81 ✅
+'10000' //10000 ✅

請注意，它在第一個示例中返回NaN，這是正確的行為：它不是數字。

使用Math.floor()

與+一元運算符類似，但返回整數部分的方法，是使用Math.floor()：

Math.floor('10,000') //NaN ✅
Math.floor('10.000') //10 ✅
Math.floor('10.00') //10 ✅
Math.floor('10.20') //10 ✅
Math.floor('10.81') //10 ✅
Math.floor('10000') //10000 ✅

使用* 1

通常是最快的選擇之一，與+一元運算符的行為類似，因此如果數字是浮點數，它不會執行整數轉換。

'10,000' * 1 //NaN ✅
'10.000' * 1 //10 ✅
'10.00' * 1 //10 ✅
'10.20' * 1 //10.2 ✅
'10.81' * 1 //10.81 ✅
'10000' * 1 //10000 ✅

性能

上述每一種方法在不同的環境中性能不同，因為它完全取決於實現方式。在我的情況下，“* 1”在性能上是最快的，比其他替代方法快10倍。

使用JSPerf來自行測試：

tags: [“JavaScript”, “string to number”, “conversion”, “parseInt”, “parseFloat”, “Number”]