快速提示：如何将字符串转换为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中文网其他相关文章！