数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在JavaScript中将字符串转换为数字？
为了在JavaScript中将字符串转换为数字，这有助于用户执行精确的数学运算、比较和处理表单输入。我们将讨论各种方法，并为每种方法提供示例代码，以在JavaScript中将字符串转换为数字。
在本文中，我们有一个字符串值，我们的任务是在JavaScript中将字符串转换为数字。
在JavaScript中将字符串转换为数字的方法
以下是本文将讨论的几种在JavaScript中将字符串转换为数字的方法，我们将逐步解释并提供完整的示例代码。
- 使用Number构造函数转换为数字
- 使用parseFloat方法转换为数字
- 使用parseInt方法转换为数字
- 使用一元运算符转换为数字
- 通过乘以1转换为数字
- 通过除以1转换为数字
- 从字符串中减去0
- 使用按位非运算符转换为数字
- 使用双波浪线运算符转换为数字
- 使用Math.floor方法转换为数字
- 使用Math.round方法转换为数字
- 使用Math.ceil方法转换为数字
使用Number构造函数转换为数字
为了在JavaScript中将字符串转换为数字，我们使用了Number()构造函数。使用Number()构造函数可以将字符串等数据类型转换为数字。
示例
这是一个使用**Number()**构造函数将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = Number(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用parseFloat方法转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了**parseFloat()**方法，该方法将字符串转换为浮点数，并保留小数部分。
示例
这是一个使用**parseFloat()**方法将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123.29";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = parseFloat(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用parseInt方法转换为数字
在这种方法中，我们使用了**parseInt()**方法在JavaScript中将字符串转换为数字。它接受字符串作为参数，并将字符串转换为整数值。
示例
这是一个使用**parseInt()**方法将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = parseInt(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用一元运算符转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了**一元(+)**运算符。它强制进行类型转换，JavaScript会在内部检查有效的数字（即整数或浮点数），然后通过类型强制或自动转换将其转换为数字。
示例
这是一个使用**一元**运算符将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = +str;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
通过乘以1转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们将字符串乘以1，这会强制自动将字符串转换为数字。
示例
这是一个将字符串乘以1以将其转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = str*1;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
通过除以1转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们将字符串除以1，这会强制自动将字符串转换为数字。
示例
这是一个将字符串除以1以将其转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = str/1;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
从字符串中减去0
在这种将字符串转换为JavaScript数字的方法中，我们从字符串中减去了0，这会强制自动将字符串转换为数字。
示例
这是一个从字符串中减去0以将其转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = str-0;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用按位非运算符转换为数字
在这种方法中，我们使用了按位非运算符在JavaScript中将字符串转换为数字。按位非运算符会反转操作数，然后将其转换为32位有符号整数，从而将字符串转换为数字。
示例
这是一个使用按位**非**运算符将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = ~str;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用双波浪线运算符转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了**双波浪线(~~)**运算符。它会两次应用非运算符，从而将字符串转换为数字，强制进行自动转换。
示例
这是一个使用**双波浪线(~~)**运算符将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = ~~str;
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用Math.floor方法转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了Math.floor方法。它通过类型强制将字符串转换为数字，然后将数字舍入到最接近的整数值。
示例
这是一个使用**Math.floor**方法将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123.2";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = Math.floor(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用Math.round方法转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了Math.round方法。它通过类型强制将字符串转换为数字，然后将数字舍入到最接近的整数值，将小数0.5视为临界点。
示例
这是一个使用**Math.round**方法将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123.6";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = Math.round(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
使用Math.ceil方法转换为数字
在这种将字符串转换为JavaScript数字的方法中，我们使用了Math.ceil方法。它通过类型强制将字符串转换为数字，然后将数字舍入到最接近的向上整数值，即使小数位的值很小。
示例
这是一个使用**Math.ceil**方法将字符串转换为数字的示例。
<html>
<body>
<div id="str"></div>
<div id="num"></div>
<script>
let x=document.getElementById("str");
let str = "123.01";
x.innerHTML = "Input String: " + str
+ ", It is of type: " +typeof str;
let res=document.getElementById("num");
let num = Math.ceil(str);
res.innerHTML = "Result: " + num
+ ", It is of type: " +typeof num;
</script>
</body>
</html>
注意：除**双波浪线**运算符外，所有上述方法对于非数字字符（既不是数字也不是整数）都返回**NaN（非数字）**。它返回0。
结论
在JavaScript中将字符串转换为数字是一项非常简单易行的任务。在本文中，我们讨论了十二种方法：使用**Number()**构造函数、**parseFloat()**方法、**parseInt()**方法、**一元**运算符、**乘以和除以1**、**从字符串中减去0**、按位**非**运算符、**双波浪线**运算符、**Math.floor()**方法、**Math.round()**方法以及使用**Math.ceil()**方法。
610 次浏览
