快速提示：如何將字符串轉換為JavaScript中的數字

核心要點

• JavaScript 提供多種將字符串轉換為數字的方法，包括 Number() 函數、parseInt() 和 parseFloat() 函數以及一元加號 ( ) 運算符。每種方法都有其自身的用途，可根據代碼的具體要求使用。
• 在將字符串轉換為數字時，處理非數字字符至關重要。如果字符串包含除數字以外的字符，Number() 函數將返回 NaN，而 parseInt() 和 parseFloat() 函數則會解析字符串（如果數字位於字符串的開頭），並丟棄其餘字符。
• 務必注意返回結果可能是 NaN 的情況。要檢查值是否為 NaN，可以使用全局函數 isNaN()。

JavaScript 提供多種數據類型轉換方法。我們已經介紹瞭如何將數字轉換為字符串。在本簡短教程中，我們將介紹如何在 JavaScript 中將字符串轉換為數字。

許多情況下，數字可能以字符串的形式存儲。例如，從表單元素接收的值始終是字符串。

通常，您可以將包含數字（且僅包含數字）的 JavaScript 字符串視為數字，JavaScript 將自動執行字符串到數字的轉換。但是，有時您需要從字符串中提取數字，或對轉換方式進行更多控制。

在此快速提示中，我們將介紹三種將字符串轉換為數字的方法。

使用 Number() 將字符串轉換為數字

在 JavaScript 中將字符串轉換為數字最直接的方法是使用內置的 Number 構造函數。例如：

const str = "10";
console.log(str); // "10"
console.log(typeof str); // "string"

const number = Number(str);
console.log(number); // 10
console.log(typeof number); // "number"

在控制台中記錄 str 的值及其類型時，結果分別是作為字符串的 10 和字符串。轉換後，結果分別是作為數字的 10 和數字。

您可以在以下 CodePen 演示中查看實際示例。

[CodePen 演示鏈接 (請https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)]

請注意，如果您將非數字字符串傳遞給數字，則將返回 NaN。

使用 parseInt() 和 parseFloat() 將字符串轉換為數字

另一種方法是使用 parseInt() 和 parseFloat()。顧名思義，parseInt() 將字符串解析為整數，而 parseFloat() 將字符串解析為帶小數點的數字。

例如：

const str = "10.9";
console.log(str); // "10.9"
console.log(typeof str); // "string"

const intNumber = parseInt(str);
console.log(intNumber); // 10
console.log(typeof intNumber); // "number"

const floatNumber = parseFloat(str);
console.log(floatNumber); // 10.9
console.log(typeof floatNumber); // "number"

與第一種方法類似，在控制台中記錄 str 的值及其類型時，結果分別是作為字符串的 10.9 和字符串。但是，使用 parseInt 解析 str 時，intNumber 的值變為 10，其類型為數字。

另一方面，使用 parseFloat 解析 str 時，floatNumber 的值變為 10.9（作為數字），其類型為數字。

您可以在以下 CodePen 演示中查看實際示例。

[CodePen 演示鏈接 (請https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)]

parseInt() 的第二個參數

parseInt() 接受第二個參數，該參數指定要從字符串中解析的數字的基數。此參數實際上是可選的，但強烈建議您始終提供它。

如果沒有此第二個參數，parseInt 將執行自動基數檢測。也就是說，它通過字符串中的格式檢測數字的基數。以 0x 或 0X 開頭的數字被認為是十六進制（基數 16），所有其他數字都被認為是十進制。

因此，例如，如果您要調用 parseInt("08")，則輸入值將被視為八進制數；但 8 不是八進制數字（因為八進制數為 0-7），因此函數將返回零，而不是八。

為避免任何混淆，在使用 parseInt() 時始終指定基數。

使用一元加號將字符串轉換為數字

將字符串轉換為數字的第三種方法是使用一元加號 ( ) 。如果在一元加號之前使用操作數，它將嘗試將其轉換為數字。因此，如果操作數是包含數字的字符串，則一元加號將將其轉換為數字。

例如：

const str = "10";
console.log(str); // "10"
console.log(typeof str); // "string"

const number = Number(str);
console.log(number); // 10
console.log(typeof number); // "number"

當您記錄 str 的類型時，正如預期的那樣，它是字符串。但是，當您記錄 str 的值及其類型時，控制台中分別記錄了 10 和數字。

您可以在以下 CodePen 演示中查看實際示例。

[CodePen 演示鏈接 (請https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)]

如何處理字符串中的非數字字符

務必考慮字符串可能包含除數字以外的字符的情況，以及每種方法如何處理這種情況。

使用 Number() 時，如果字符串包含除數字以外的字符、開頭處的加號 ( ) 和減號 (-) 或小數點，則返回值是特殊值 NaN（非數字）。 NaN 是表示非數字的全局屬性。當這些運算的操作數或參數不是數字或不能用於該特定數學運算時，某些數值運算將返回它。

另一方面，如果數字位於字符串的開頭，則 parseInt() 和 parseFloat() 將解析字符串。它會丟棄其餘字符，並採用在字符串開頭遇到的數字。但是，如果字符串以除數字以外的字符、開頭處的加號 ( ) 和減號 (-) 或小數點開頭，則返回值是特殊值 NaN（非數字）。

您可以在以下 CodePen 演示中查看實際示例。

[CodePen 演示鏈接 (請https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)]

如您所見，Number() 返回 NaN，因為字符串包含 px。但是，parseInt() 返回 10，因為它位於字符串的開頭。

您可以使用全局函數 isNaN() 檢查值是否為 NaN。

結論

本簡短教程介紹了三種在 JavaScript 中將字符串轉換為數字的方法。 Number() 可以將字符串轉換為數字，無論是浮點數還是整數。但是，如果字符串包含其他字符，它將返回 NaN。如果您想確保字符串的嚴格轉換，這將很有用。

另一方面，parseInt() 和 parseFloat() 在處理數字中的其他字符方面更靈活。但是，在某些情況下，這兩個函數不能互換使用。例如，如果字符串中的數字是浮點數，而您使用 parseInt()，則與字符串相比，您將獲得不正確的值。

雖然一元加號易於使用，但它可能會降低代碼的可讀性。無論您選擇哪種方法，都務必注意返回結果可能是 NaN 的情況。

如果您覺得這篇文章有用，您可能還會喜歡以下內容：

• 學習使用 JavaScript 編程
• 如何快速學習 JavaScript：六個簡單的思維技巧 (https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)
• 25 JavaScript 簡寫編碼技巧 (https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)
• ES6 實戰：新的數字方法 (https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)
• ES6 實戰：新的字符串方法 — String.prototype.* (https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)
• 真值和假值：JavaScript 中並非所有內容都相等 (https://www.php.cn/link/a1d41c14c1d0aa9b9cc1e228d962fe42)

JavaScript 中將字符串轉換為數字的常見問題解答

在 JavaScript 中將字符串轉換為數字有哪些不同的方法？

在 JavaScript 中將字符串轉換為數字有幾種方法。最常用的方法包括 Number() 函數、parseInt() 函數、parseFloat() 函數和一元加號 ( ) 運算符。每種方法都有其自身的用途，可根據代碼的具體要求使用。

Number() 函數在 JavaScript 中是如何工作的？

JavaScript 中的 Number() 函數可用於將字符串轉換為數字。它以字符串作為參數，並返回一個數字。如果字符串無法轉換為數字，則返回 NaN（非數字）。例如，Number("1234") 將返回 1234，而 Number("1234abc") 將返回 NaN。

parseInt() 和 parseFloat() 在 JavaScript 中有什麼區別？

parseInt() 和 parseFloat() 都用於將字符串轉換為 JavaScript 中的數字。區別在於它們返回的數字類型。 parseInt() 返回整數，而 parseFloat() 返回浮點數。例如，parseInt("123.45") 將返回 123，而 parseFloat("123.45") 將返回 123.45。

如何使用一元加號 ( ) 運算符將字符串轉換為 JavaScript 中的數字？

一元加號 ( ) 運算符可用於將字符串轉換為 JavaScript 中的數字。它放在字符串之前，如下所示： “1234”。這將返回數字 1234。如果字符串無法轉換為數字，則返回 NaN。

如果我嘗試將非數字字符串轉換為 JavaScript 中的數字會發生什麼？

如果您嘗試使用上述任何方法將非數字字符串轉換為 JavaScript 中的數字，它將返回 NaN，即非數字。

如何檢查 JavaScript 中從字符串到數字的轉換是否成功？

您可以使用 JavaScript 中的 isNaN() 函數檢查從字符串到數字的轉換是否成功。如果參數為非數字 (NaN)，則此函數返回 true，否則返回 false。

我可以在不使用任何內置函數的情況下將字符串轉換為 JavaScript 中的數字嗎？

是的，可以在不使用任何內置函數的情況下將字符串轉換為 JavaScript 中的數字，儘管這更複雜，不推薦初學者使用。一種方法是使用循環迭代字符串中的每個字符，並使用數字的 ASCII 值計算數字。

如何將字符串轉換為 JavaScript 中的整數？

您可以使用 parseInt() 函數將字符串轉換為 JavaScript 中的整數。此函數以字符串作為參數，並返回一個整數。如果字符串無法轉換為整數，則返回 NaN。

如何將字符串轉換為 JavaScript 中的浮點數？

您可以使用 parseFloat() 函數將字符串轉換為 JavaScript 中的浮點數。此函數以字符串作為參數，並返回一個浮點數。如果字符串無法轉換為浮點數，則返回 NaN。

將字符串轉換為 JavaScript 中的數字的最佳方法是什麼？

將字符串轉換為 JavaScript 中的數字的最佳方法取決於您的具體要求。如果您需要整數，請使用 parseInt()。如果您需要浮點數，請使用 parseFloat()。如果您不確定，請使用 Number() 函數或一元加號 ( ) 運算符，因為它們可以處理整數和浮點數。

請注意，我已盡力對原文進行偽原創，並保留了圖片的原始格式和位置。 由於無法訪問外部網站和圖片鏈接，我無法驗證圖片鏈接的有效性，請您自行確認。 如有需要，請提供圖片的本地文件。

以上是快速提示：如何將字符串轉換為JavaScript中的數字的詳細內容。更多資訊請關注PHP中文網其他相關文章！