JavaScript里的数据类型的转换-CSDN博客

本文链接：https://blog.csdn.net/tony_yang6/article/details/106833990

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* background: #0000ff; */
        }

    </style>
</head>
<body>
    <script>
        // 转换的目标 : 数字 ; 
        // API : 需要调用的一个有功能的单词;
        // ---- parseInt

        // parseInt(); parse : 解析  Int : 整数;
        // API 使用 : ( 参数 => 其他的数据类型 )
        // var str = "hello world";
        // parseInt( str ); // 运算结果就是转换好的数据;
        // var num = parseInt( str );
        // NaN => 错误转换(运算)之后的数字类型; 表示非数字; * 数据类型为数字;
        // console.log(num);

        // parseInt的正确使用姿势;
        // var str = "123456"; // 认定为是字符串;
        // console.log(typeof str);
        // 转换成纯数字类型;
        // var num = parseInt(str);
        // console.log(typeof num);

        // parseInt : 1. 从左到右依次检索每一个字符,当一个非数字出现的时候,会省略掉这个字符后面的所有内容，截取前部内容转换成数字
        //            2. 如果第一个字符不是数字，那么运算结果为 NaN;
        // var str = "123.456456abcdefg";
        // var num = parseInt(str);
        // console.log(num)

        // ---- parseFloat
        // parseFloat() => parse 解析 Float 小数
        // parseFloat : 1. 从左到右依次检索每一个字符,当一个不和数字规则的字符出现的时候,会省略掉这个字符后面的所有内容，截取前部内容转换成数字
        //              2. 如果第一个字符不是数字，那么运算结果为 NaN;
        // var str = "123.456abcd";
        // var num1 = parseInt(str);
        // var num2 = parseFloat(str);
        // console.log(num1);
        // console.log(num2);

        // parseInt普遍不适用于其他类型的转换;
        // var bool = true;
        // var num  = parseInt(bool);
        // console.log(num); // NaN; 

        // var undef;
        // var num  = parseInt(undef);
        // console.log(num); // NaN;
        
        // var nul = null;
        // var num = parseInt(nul);

        // console.log(num);

        // parseInt  可不可以用处理数字 ?  可以 ! 取整;

        // * parseInt 高级用法 : 进制转换;

        // 2  0 1
        // 8  0 1 2 3 4 5 6 7 10
        // 10 0 1 2 3 4 5 6 7 8 9 10
        // 16 0 1 2 3 4 5 6 7 8 9 A B C D E F 10

        // 颜色 :  两种写法 : FFFFFF , rgb(255)
        // FF => 255
        // var num = parseInt( "ff" , 16 );
        // var num = parseInt( "不同进制的数据" , 当前数据的进制 );
        // console.log(num)
        
        // 总结 : 
        // 1. parseInt, parseFloat 更适合字符串转换成数字, 其它类型转换都为NaN;
        // 2. parseInt, parseFloat 的使用规则;
        // 3. parseInt 可以用来做数字的取整;
        // 4. * 进制转换



    </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 = "123abc";
        // Number(); 任何类型转换成数字的通用方法;
        // Number转换非常严格 => 区分 parseInt 和 parseFloat;
        // Number 检索方式是整条字符串检索;
        // var num = Number(str);
        // console.log(num);

        // var bool = true; // 1;
        // var bool = false;   // 0;
        // var num  = Number(bool);
        // console.log(num);

        // var undef ; 
        // var num = Number(undef); 
        // console.log(num); // NaN;

        // var nul = null;
        // var num = Number(nul);
        // console.log(num)
        
        // ---- Math.round(); 四舍五入
        var str = "1.534";
        var num = Math.round(str);
        console.log(num);

        // Math.round 虽然可以进行数据类型转换，但是 这个方法更多的是用在数字的取整上;


        // parseInt;
        // parseFloat;
        // Number
        // Math.round; 

        // ctrl + alt + a 截图;
        
    </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>
        // 其他类型转换成字符串!
        // toString();
        // String();

        // toString();

        // 数字转换成字符串
        // var num = 123456;
        // // 使用方式不一样 ! 数据.toString();
        // var str = num.toString();
        // console.log(str);
        
        // 布尔值转换成字符串;
        // var bool = true;
        // var str  = bool.toString();
        // console.log(str);

        // undefined 转换成字符串; toString 不能用!;
        // var undef;
        // var str = undef.toString();
        // console.log(str);

        // Uncaught TypeError: Cannot read property 'toString' of undefined
        // TypeError : 类型错误;
        // Cannot read property 'toString' of undefined : 在undefined 无法读取*属性* toString 

        // null 转换成字符串; toString 不能用 !;
        // var nul = null;
        // var str = nul.toString();
        // console.log(str);

        // String();

        // 数字类型转换没有问题。
        // var num = 0;
        // var str = String(num);
        // console.log(str);

        // 布尔类型转换;
        // var bool = true;
        // var str = String(bool);
        // console.log(str);

        // undefined 类型转换;
        // var undef;
        // var str = String(undef);
        // console.log(str);

        // null 类型转换;
        // var nul = null;
        // var str = String(nul);
        // console.log(str);

        // 野路子转换字符串!; 简单;

        // 任意类型 + 运算 一个空字符串;
        // var str = "" + 12345;
        // var str = "" + true;
        // var str = "" + undefined;
        // var str = "" + null;

        console.log(str);


     </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>
        // Boolean;
        // 以下五种情况是false;
        // var bool = Boolean(0);
        // var bool = Boolean(NaN);
        // var bool = Boolean("");
        // var bool = Boolean(undefined);
        // var bool = Boolean(null);

        // 其余全都是true;
        // console.log(bool);

        // 野路子;  !! 
        // var bool = !!123;
        // var bool = !!undefined;
        // console.log(bool);
    </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>
        // + - * /  
        // % => 取余 

        // 最特别的那个仔 : + 

        // 1. 数学运算的加法运算;
        // var res = 1 + 1;
        // console.log(res);

        // 2. 字符串的拼接;
        // "a" "b" 把两个字符串合并在一起;
        // var str = "a" + "b";
        // console.log(str);
        // - 其他任意类型加上字符串为啥就都变成字符串了那 ? 
        // var str = "a" + 1;
        // JS 有一个特征 : JS是弱类型的 , 发现数据类型不一致的时候是在执行阶段。
        // JS 选择如果运算是类型不一致, JS会帮助数据进行类型转换; 这样的行为是隐式的。
        // 隐式数据类型转换!;
        // 有字符串就有限转换成字符串!;
        // var str = "a" + "1";
        // console.log(str);

        // var str = "a" + 1;
        // => "a" + "1"
        // => "a1"

        // var str = 1 + "a";
        // => "1" + "a";
        // => "1a";

        // - * / % 
        // 1. 左右两侧不是数字，隐式转换成数字再去进行运算;
        // var num = 1 - "1";
            // 1 - 1;
            // 0;
        // console.log(num);

        // var num = 1 * "1";
        // 1 * 1;
        // 1

        // var num = 1 * "a";
        // => 1 * NaN;

        // => NaN
        // console.log(num);





    </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 num = 10; // num => 工资 10 k
        // 涨工资10k;
        // num = num + 10;
        // 同样一个num有了两种含义 ;
        // num (左值) : 被赋值;
        // num (右值) : 数据;
        // 又涨了10k
        // num = num + 10;
        // 可以继续!;
        // num = 10 + 10;
        // num = 20;
        // console.log(num);

        // 简写 : 
        // num = num + 10;
        //     = num + 10;
        // num += 10;
        num += 10;
        


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