将 String 类型转换为数值类型
- 如果字符串中都是数值, 那么就可以正常转换
- 如果字符串是一个空串
"" /" ", 那么转换之后就是0 - 如果字符串中不仅仅是数字, 那么转换之后是
NaN
将 Boolean 类型转换为数值类型
-
true 转换之后是1 -
false 转换之后是0
将 undefined 类型转换为数值类型
- 转换之后是 NaN
将 null 类型转换为数值类型
- 转换之后是
0
总结
- 空字符串 / false / null 转换之后都是
0 - 字符串中不仅仅是数字 / undefined 转换之后是
NaN - 其它的正常转换
在 JavaScript 中如果想将以上的四种基本数据类型转换为数值类型, 常用的方法有三种
- 通过 Number(常量 or 变量)的方式来转换
- 还可以通过数学运算中的
+ 号和- 号来转换 - 还可以通过
parseInt(需要转换的字符串) /parseFloat(需要转换的字符串)
将 String 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "123";
console.log(str);
console.log(typeof str);
let num = Number(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let num = Number("456");
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
注意点: 如果字符串中没有数据, 那么转换的结果是 0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
// let str = "";
let str = " ";
let num = Number(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
注意点: 如果字符串中的数据不仅仅是数值, 那么转换的结果是 NaN, NaN === Not a Number, NaN 不是数字
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "12px";
let num = Number(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 Boolean 类型转换为数值类型
如果是布尔类型的 true, 那么转换之后的结果是 1, 如果是布尔类型的 false, 那么转换之后的结果是 0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let flag = true;
let num = Number(flag);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let flag = false;
let num = Number(flag);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 undefined 类型转换为数值类型
如果是未定义类型, 那么转换之后的结果是 NaN
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let value = undefined;
let num = Number(value);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 null 类型转换为数值类型
如果是空类型, 那么转换之后的结果是 0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let value = null;
let num = Number(value);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
虽然通过 + / - 都可以将其它类型转换为数值类型, 但是 - 会改变数值的正负性, + / - 底层的本质上就是调用了 Number 函数
将 String 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "123";
let num = +str;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "123";
let num = -str;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 Boolean 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let flag = true;
let num = +flag;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let flag = false;
let num = +flag;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 undefined 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let value = undefined;
let num = +value;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
将 null 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let value = null;
let num = +value;
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
通过 parseInt(需要转换的字符串) / parseFloat(需要转换的字符串) 转
将 String 类型转换为数值类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "12px";
let num = parseInt(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "3.14px";
let num = parseFloat(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
注意点: parseInt / parseFloat 都会从左至右的提取数值, 一旦遇到非数值就会立即停止, 停止的时候如果还没有提取到数值, 那么就返回 NaN
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let str = "a3.14px";
let num = parseFloat(str);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
注意点: parseInt / parseFloat 都会将传入的数据当做字符串来处理
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let value = true;
// parseInt("true");
let num = parseInt(value);
console.log(num);
console.log(typeof num);
</script>
</body>
</html>
