【JavaScript】数据类型转换 ② ( 字符类型转为数据类型 | parseInt() / parseFloat() 函数 | Number() 函数 | 运算符隐式转换 )

韩曙亮

发布于 2024-03-18 08:42:18

510

发布于 2024-03-18 08:42:18

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、字符类型转为数据类型

将数据转为数字类型有如下四种方法 , 使用 parseInt() 和 parseFloat() 函数是最常用的两种方法 , 需要重点掌握 ;

parseInt() 函数 : 将 string 类型字符串转为整型 number 数字类型 ;
parseFloat() 函数 : 将 string 类型字符串转为浮点型 number 数字类型 ;
Number() 函数 : 调用 Number() 强制转换函数 , 将 string 字符串类型转为 number 数字类型 ;
隐式转换 : 字符串进行算术运算时 , JavaScript 会尝试将操作数转换为数字 ;

1、parseInt() / parseFloat() 函数

parseInt() 函数 : 解析字符串并返回一个整数 , 将 string 类型字符串转为整型 number 数字类型 ;

let intFromStr = parseInt("10");
console.log(intFromStr) // 输出 : 10

parseFloat() 函数 : 解析并返回一个浮点数 , 将 string 类型字符串转为浮点型 number 数字类型 ;

let floatFromStr = parseFloat("10.00"); 
console.log(floatFromStr) // 输出 : 10

如果解析的字符串 , 前面部分是数字 , 后面是非数字 , 则只解析前半部分数字部分的字符串 , 后面的字符串部分直接丢弃 ;

// parseInt 解析 字符串 , 会停止在第一个非数字字符 
let intNotANum = parseInt("20px");
console.log(intNotANum) // 输出 : 20

如果解析的字符串 , 都是非数字 , 转换结果是 NaN 非数字 ;

// 传入非数字字符串 , 得到 NaN
let notANum = parseFloat("hello");
console.log(notANum) // 输出 : NaN

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 将 字符串类型 转为 数字类型

        let intFromStr = parseInt("10");
        console.log(intFromStr) // 输出 : 10

        let floatFromStr = parseFloat("10.00");
        console.log(floatFromStr) // 输出 : 10

        // parseInt 解析 字符串 , 会停止在第一个非数字字符 
        let intNotANum = parseInt("20px");
        console.log(intNotANum) // 输出 : 20

        // 传入非数字字符串 , 得到 NaN
        let notANum = parseFloat("hello");
        console.log(notANum) // 输出 : NaN
    </script>
</head>

<body>
</body>

</html>

展示效果 :

2、Number() 函数

Number() 函数 : 调用 Number() 强制转换函数 , 将 string 字符串类型转为 number 数字类型 ;

Number() 是一个内建的 JavaScript 函数 , 用于将对象转换为数字 , 如果被转换的字符串不是数字无法转换 , 则返回 NaN 非数字值 ;

代码示例 :

let str = "123";  
let num = Number(str);
console.log(num) // 输出 : 123
  
let notANum = Number("hello");
console.log(notANum) // 输出 : NaN

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 将 字符串类型 转为 数字类型

        let str = "123";
        let num = Number(str);
        console.log(num) // 输出 : 123

        let notANum = Number("hello");
        console.log(notANum) // 输出 : NaN
    </script>
</head>

<body>
</body>

</html>

展示效果 :

3、运算符隐式转换

在对 string 字符串类型进行算术运算时 , JavaScript 会尝试将操作数转换为数字 ;

算术运算符 - , * , / 会有隐式转换 , 在字符串前面单独使用 + ( 加号前面不能有元素 ) 也会有隐式转换 ;

下面的减 0 算术运算操作 , 会尝试将字符串转换为数字 ;

let str = "5";  

//  减 0 算术运算操作 会 尝试将 字符串转换为数字
let num = str - 0;

console.log(num) // 输出 : 5
console.log(typeof num) // 输出 : number

在字符串前面加上加号 , 会尝试将字符串转换为数字 ;

// 在字符串前面加上加号 , 会尝试将 字符串转换为数字
let nmu2 = +str;

console.log(nmu2) // 输出 : 5
console.log(typeof nmu2) // 输出 : number

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 将 字符串类型 转为 数字类型

        let str = "5";

        // 算术运算操作 会 尝试将 字符串转换为数字
        let num = str - 0;

        console.log(num) // 输出 : 5
        console.log(typeof num) // 输出 : number

        // 在字符串前面加上加号 , 会尝试将 字符串转换为数字
        let nmu2 = +str;

        console.log(nmu2) // 输出 : 5
        console.log(typeof nmu2) // 输出 : number
    </script>
</head>

<body>
</body>

</html>

展示效果 :