JavaScript中其他数据类型转换为数值类型-CFANZ编程社区

将 String 类型转换为数值类型

如果字符串中都是数值, 那么就可以正常转换
如果字符串是一个空串"" /" ", 那么转换之后就是0
如果字符串中不仅仅是数字, 那么转换之后是NaN

将 Boolean 类型转换为数值类型

true 转换之后是1
false 转换之后是0

将 undefined 类型转换为数值类型

转换之后是 NaN

将 null 类型转换为数值类型

转换之后是0

总结

空字符串 / false / null 转换之后都是0
字符串中不仅仅是数字 / undefined 转换之后是NaN
其它的正常转换

在 JavaScript 中如果想将以上的四种基本数据类型转换为数值类型, 常用的方法有三种

通过 Number(常量 or 变量)的方式来转换
还可以通过数学运算中的+ 号和- 号来转换
还可以通过parseInt(需要转换的字符串) /parseFloat(需要转换的字符串)

将 String 类型转换为数值类型

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_值类型_02

注意点: 如果字符串中没有数据, 那么转换的结果是 0

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html_03

注意点: 如果字符串中的数据不仅仅是数值, 那么转换的结果是 NaN, NaN === Not a Number, NaN 不是数字

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html_04

将 Boolean 类型转换为数值类型

如果是布尔类型的 true, 那么转换之后的结果是 1, 如果是布尔类型的 false, 那么转换之后的结果是 0

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_类型转换_05

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_类型转换_06

将 undefined 类型转换为数值类型

如果是未定义类型, 那么转换之后的结果是 NaN

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_值类型_07

将 null 类型转换为数值类型

如果是空类型, 那么转换之后的结果是 0

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_值类型_08

虽然通过 + / - 都可以将其它类型转换为数值类型, 但是 - 会改变数值的正负性, + / - 底层的本质上就是调用了 Number 函数

将 String 类型转换为数值类型

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_html_09

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_值类型_10

将 Boolean 类型转换为数值类型

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_类型转换_11

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_html_12

将 undefined 类型转换为数值类型

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html_13

将 null 类型转换为数值类型

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html_14

通过 parseInt(需要转换的字符串) / parseFloat(需要转换的字符串) 转

将 String 类型转换为数值类型

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_类型转换_15

<!DOCTYPE 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>

JavaScript中其他数据类型转换为数值类型_html_16

注意点: parseInt / parseFloat 都会从左至右的提取数值, 一旦遇到非数值就会立即停止, 停止的时候如果还没有提取到数值, 那么就返回 NaN

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_类型转换_17

注意点: parseInt / parseFloat 都会将传入的数据当做字符串来处理

<!DOCTYPE html>
<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>

JavaScript中其他数据类型转换为数值类型_html_18