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

将 String 类型转换为数值类型

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

将 Boolean 类型转换为数值类型

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

将 undefined 类型转换为数值类型

  • 转换之后是 NaN

将 null 类型转换为数值类型

  • 转换之后是 0

总结

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

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

  1. 通过 Number(常量 or 变量)的方式来转换
  2. 还可以通过数学运算中的 + 号和 - 号来转换
  3. 还可以通过 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>


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

注意点: 如果字符串中没有数据, 那么转换的结果是 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>

注意点: 如果字符串中的数据不仅仅是数值, 那么转换的结果是 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>

将 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>


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

将 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>

将 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>

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


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

将 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>


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

将 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>

将 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>

通过 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>


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

注意点: 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>

注意点: 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>

posted @ 2021-01-25 11:37  BNTang  阅读(1046)  评论(0)  编辑  收藏  举报