【JavaScript】数据类型转换 ① ( 隐式转换和显式转换 | 常用的数据类型转换 | 转为字符串类型方法 )

韩曙亮

发布于 2024-03-18 08:41:37

1850

发布于 2024-03-18 08:41:37

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

一、 JavaScript 数据类型转换

1、数据类型转换

在网页端使用 HTML 表单和浏览器输入框 prompt 函数 , 接收的数据是字符串类型变量 ,

该字符串类型变量无法直接进行使用 , 如 : 与 number 数字类型变量相加 , 与 boolean 布尔类型进行逻辑运算 ;

将字符串类型变量先转为其它数据类型 , 然后再与对应数据类型进行计算 ;

2、隐式转换和显式转换

在 JavaScript 中 , 变量的数据类型可以互相进行转换 , 数据类型转换有两种方式 :

隐式转换 : 在指定的使用场景进行自动转换 ;
显式转换 : 主动进行数据类型转换 ;

3、常用的数据类型转换

常用的数据类型转换 :

转为字符串类型 : 输出文本 / 日志 , 网页中展示信息 , 都是字符串格式 , 此时需要将其它类型的数据转为字符串类型 ;
转为数字类型 : 进行数值计算时 , 需要将其它类型数据 , 转为数字类型 ;
转为布尔类型 : 进行逻辑运算或条件控制 / 循环控制时 , 需要将其它类型数据转为布尔类型值使用 ;

4、转为字符串类型方法

转为字符串类型方法 : -加号拼接字符串 ( 隐式转换 ) : 在使用加号 + 运算符进行字符串拼接时 , 会自动将被拼接的数据值转为字符串类型 , 在下面的代码中 , 自动将数字类型的 num 转为字符串类型 , 然后再进行字符串拼接 ;

var num = 1;
console.log(num)
console.log("" + num)

toString() 函数 ( 显式转换 ) : 调用要转换的值的 toString 函数 , 可以将该值转为字符串类型 , 下面的代码中调用了 number 类型的变量 num 的 toString 函数 , 将数字类型转为字符串类型 ;

var num = 1;
console.log(num.toString())
console.log(typeof num.toString())

String() 构造函数 ( 显式转换 ) : 将要转换的值传入 String 构造函数中 , 就可以将该值转为字符串类型 ;

var num = 1;
console.log(String(num))
console.log(typeof String(num))

完整代码示例 :

<!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>
        var num = 1;
        console.log(num)
        console.log("" + num)

        console.log(num.toString())
        console.log(typeof num.toString())

        console.log(String(num))
        console.log(typeof String(num))
    </script>
</head>

<body>
</body>

</html>

展示效果 :