JavaScript数据类型和类型转换

哦！好巧，我也是

已于 2022-04-07 17:31:27 修改

阅读量386

点赞数

文章标签： javascript

于 2022-04-07 17:29:31 首次发布

本文链接：https://blog.csdn.net/m0_51311069/article/details/124021949

版权

数据类型和类型转换

数据类型

基础数据类型

字符串类似于“iPhone ’空空如也’ 去结算

数值类似:3.14 100 -3.14 -100

布尔类似: true false 例如：人的性别，是否包邮，

undefined 类似：undefined

null 类似：null

复合数据类型

对象：

内部可以同时保存多个值

语法：{

属性名：属性值，

…

}

取出对象中的属性值：

对象.属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*标识符命名规则:
          1.只能包含数字,字母,下划线,$
          2.不能以数字开头
          3.不能和关键字冲突
        */

        // 所有变量的默认值是 undefined

        var goodName = "iphone 14 pro max";
        var goodPrice = 8888;
        var googCount = 10;
        var goodIsFree = true;
        var goodPic = "http://dummuing.com/200x200/ff0000";
        var goodAddress = "西安市";
        var goodShopName = "苹果旗舰店";

        // 对象（商品对象）
        var obj ={
            goodName:"iphone 14 prp max",
            goodPrice:8888,
            googCount:true,
            goodPic:"http://dummuing.com/200x200/ff0000",
            goodAddress:"西安市",
            goodShopName:"苹果旗舰店"
        };

        // 取出对象中每个属性的值
        console. log( obj.goodName, obj.goodPrice, obj.goodCount, obj.goodIsFree, obj.goodPic, obj. goodAddress, obj.goodShopName );
        // 打印整个对象
        console.log(obj);

        /* 一辆汽车：名字，颜色，重量，是否自动挡，是否新能源，是否能跑，最高速度*/ 
        var car ={
            goodName:"奔驰",
            goodColor:"red",
            googWeight:"1t",
            goodZd:true,
            goodNy:true,
            goodFun:true,
            goodSd:220,
        }
       
        console.log(obj);



    </script>
</body>
</html>

数组

内部可以同时保存多个值

例如：多个字符串,多个数字

语法：var 变量名 = [元素，元素，元素，…];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 保存5个人名
        var ren1 = "张三";
        var ren2 = "李四";
        var ren3 = "马云";
        var ren4 = "马化腾";
        var ren5 = "雷军";

        // 数组
        // 语法：var 变量名 = [元素，元素，元素，...];
        // 特点：保存多个同类型数据(从语法上来讲，可以放入不同类型的数据)
        var arr = ["张三","李四","马云","马化腾","雷军"];


        // 保存10个成绩
        var score = [30,60,90,100,0,45,80,99,75,40];


        // 整体打印数组
        console.log(arr);
        console.log(score);


        /*
        对象和数组的区别:
           1.对象,数组都可以保存多个数据
           2.对象保存的多个数据类型往往都不一样;
           3.数组保存的多个数据类型往往都一样;



        */ 


    </script>
</body>
</html>

类型转换

数值/布尔转字符串

+的左右两边只要有一个数据是字符串, 最终+执行的结果是字符串拼接

 /*数值转字符串  -  借助+转为字符串*/
        console.log( 100 + 2 );//102
        console.log( 100 + "2" );//1002
        console.log( "100" + 2 );//1002
        console.log( "100” + 12" );//1002

布尔转字符串

 /*布尔转字符串 */
        console.log( true ,false ) ; 
        console.log( true +"");//true
        console.log( false +"");//false

数值转字符串-借助String转为字符串

        /*数值转字符串-借助String转为字符串 */ 
        console.log(String("100"));
        console.log(String(100));
        console.log(String(true ));
        console.log(String(false));

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         /*数值转字符串  -  借助+转为字符串*/
        console.log( 100 + 2 );//102
        console.log( 100 + "2" );//1002
        console.log( "100" + 2 );//1002
        console.log( "100” + 12" );//1002

        var score = 100;
        console.log("王浩同学的成绩是："+score);//王皓同学的成绩是：100


        /*布尔转字符串 */
        console.log( true ,false ) ; 
        console.log( true +"");//true
        console.log( false +"");//false


        /*数值转字符串-借助String转为字符串 */ 
        console.log(String("100"));
        console.log(String(100));
        console.log(String(true));
        console.log(String(false));

        /*练习:将一个商品的信息，连成一个字符串输出
        输出格式: "商品的名字是:xxx,单价:xxx元,数量是:xxx个,发货地址:xxx,店铺:xxx,商品图片地址:xxx,商品包邮:xxx"

        */
        var goodName = "iphone 14 pro max";
        var goodPrice = 8888;
        var googCount = 10;
        var goodIsFree = true;
        var goodPic = "http://dummuing.com/200x200/ff0000";
        var goodAddress = "西安市";
        var goodShopName = "苹果旗舰店";


        console.log("商品的名字是:"+goodName);
        console.log("单价:"+goodPrice);
        console.log("数量是:"+googCount);
        console.log("发货地址:"+goodAddress);
        console.log("店铺:"+goodShopName);
        console.log("商品图片地址:"+goodPic);
        console.log("商品包邮:"+goodIsFree);

        //借助+将多个短字符串拼接为一个长字符串
        var str = "商品的名字是:" + goodName + ",单价:"+goodPrice+"元,数量是:"+googCount+"个,发货地址:"+goodAddress+",店铺:"+goodShopName+",商品图片地址:"+goodPic+",商品包邮:"+goodIsFree

        console.log(str);

        /*练习2:拼接生成短信模板: "您收到的短信验证码为:[xxxxx]",请妥善保管该验证码,任何索要验证码的行为都是诈骗[xxxx]"*/

        var yzm = "889977";
        var com = "蚂蚁金服";

        var duanxin = "您收到的短信验证码为:[" + yzm + "],请妥善保管该验证码,任何索要验证码的行为都是诈骗[" + com +"]"

        console.log(duanxin);
 
    </script>
</body>
</html>

数值/字符串转布尔

Boolean（）

例如：Boolean（100）

Boolean(“ ")

小结论：

非空字符串转为布尔都是true, 空字符串转为布尔是false

非0数值转为布尔都是true, 0转为布尔是false。

undefined转为布尔是false

null转为布尔是false

大结论：

结论：所有的值当中只有这几个值转为布尔是false： 0 “” undefined null false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var studentScore = 100;
        var studentName = "老马";
       /*  
       true在布尔值中表示逻辑成立(真)
       false在布尔值中表示逻辑不成立(假)
       非空字符串转为布尔都是true, 空字符串转为布尔是false
       非0数值转为布尔都是true, 0转为布尔是false。
       undefined转为布尔是false
       null转为布尔是false
       */

    //    结论：所有的值当中只有这几个值转为布尔是false： 0   ""    undefined   null    false



        console.log(Boolean (100));
        console.log(Boolean( -100));
        console.log(Boolean("老马") );
        console.log(Boolean("+老马") );
        console.log( Boolean("") );
        
        console.log( Boolean(undefined) );
        console.log( Boolean(null) );
        console. log( Boolean(false) );


    </script>
</body>
</html>

字符串/布尔转数值

字符串转数值

纯数字组成的字符串才可以转为数值,否则会转为NaN

语法：

Number（“123hello”）

应用：

prompt()弹框,默认输入的任何内容都是字符串类型，需要转为数字才能进行四则运算
另外HTML文档的input输入框的内容也是字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 字符串转数值   Number（）
        // NAN,not a number ,表示不是数值
        //纯数字组成的字符串才可以转为数值,否则会转为NaN

        console.log(Number("hello everyone!"));
        console.log( Number( "123hello everyone!" ) ) ;
        console.log( Number( "hello 123 everyone!" ) );
        console.log( Number( "hello everyone !123") ) ;
        console.log( Number( "123" ) ) ;
        console.log( Number( "123.45") );

        // prompt()弹框,默认输入的任何内容都是字符串类型
        // 另外HTML文档的input输入框的内容也是字符串类型

        var jine=prompt("请输入贷款金额：");
        console.log(jine);



        /* 练习：弹框输入圆的半径，输出圆的面积
        圆面积公式：3.14*r*r
        */ 

        var r=Number(prompt("请输入圆的半径："));
        console.log(3.14*r*r);

    </script>
</body>
</html>

布尔转数值

true转为数值是1, false转为数值是0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // true转为数值是1, false转为数值是0

        console.log(Number(true));//1
        console.log(Number(false));//0
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = "hello";
        var num = 100;
        //isNaN() 在判断是否是非数值时，会悄悄的把数据转为数字，然后再判断
        // isNaN() 她悄悄将数据转为是值类型的过程叫做阴式类型转换
        console.log( isNaN(str) );//true
        console.log( isNaN(num) );//false, num是数值
    </script>
</body>
</html>

类型转化也存在“隐式类型转化”（我们看不到转换过程，但是能考到转换结果）

字符串转数值补充

方案一：Number（）

方案二：parseInt(),将其他类型转为整数,从第一个数字字符开始转换，遇到第一个非数字字符停止转化

方案三: parseFloat() 将其他类型转为小数，从第一个数字字符开始转换，
遇到第一个非数字字符停止转换.

方案四：isNaN(数据)

判断数据是否是非数值结果为true表示数据是非数值，结果为false表示数据不是非数值

isNaN() 在判断是否是非数值时，会悄悄的把数据转为数字，然后再判断

isNaN() 她悄悄将数据转为是值类型的过程叫做阴式类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 方案一：Number（）
        // 方案二：parseInt(),将其他类型转为整数,从第一个数字字符开始转换，遇到第一个非数字字符停止转化
        //方案三： parseFloat() 将其他类型转为小数，从第一个数字字符开始转换，遇到第一个非数字字符停止转换.
        console.log(parent("hello"));//NAN
        console.log( parseInt( "123.45hello" ) );//123
        console.log( parseInt( "he123.45llo" ) );/ /NaN
        console. log( parseInt( "hello123.45" ) );//NaN
        console.log( parseInt( "123" ) );//123

        console.log("======华丽的分割线====="));//NAN

        console.log(parentFloat("hello"));//NAN
        console.log( parseFloat( "123.45hello" ) );//123.45
        console.log( parseFloat( "he123.45llo" ) );//NaN
        console. log( parseFloat( "hello123.45" ) );//NaN
        console.log( parseFloat( "123.45" ) );//123.45

    </script>
</body>
</html>

哦！好巧，我也是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数据类型和类型转换

数据类型和类型转换数据类型基础数据类型字符串类似于“iPhone ’空空如也’ 去结算数值类似:3.14 100 -3.14 -100布尔类似: true false 例如：人的性别，是否包邮，undefined 类似：undefinednull 类似：null复合数据类型对象：内部可以同时保存多个值语法：{ 属性名：属性值，
复制链接

扫一扫