JavaScript基础--数据类型转换

2020-09-13 本文已影响0人绚丽多彩的白

什么是数据类型转换

将一个数据类型转换为其他的数据类型
- 例如: 将Number类型转换为Boolean类型
- 例如: 将Number类型转换为字符串类型

将其它类型转换为字符串

调用被转换数据类型的toString()方法

        var num1 = 10;
        var res1 = num1.toString(); // 重点
        console.log(res1); // 10
        console.log(typeof res1); // string

        var num2 = true;
        var res2 = num2.toString(); // 重点
        console.log(res2); // true
        console.log(typeof res2); // string

null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错

        var num3 = undefined;
        var res3 = num3.toString(); // 报错
        console.log(res3);

        var num4 = null;
        var res4 = num4.toString(); // 报错
        console.log(res4);

        var num5 = NaN;
        var res5 = num5.toString();
        console.log(res5); // NaN
        console.log(typeof res5); // String

该方法不会影响到原变量，它会将转换的结果返回

        var num6 = 10;
        var res6 = num6.toString();
        console.log(typeof num6); // number
        console.log(typeof res6); // string

数值类型的toString()，可以携带一个参数，输出对应进制的值(暂时不用了解, 讲到进制转换再回来看)

        var num7 = 20;
        var res7 = num7.toString(2);
        var res8 = num7.toString(8);
        var res9 = num7.toString(10);
        var res10 = num7.toString(16);
        console.log(res7); // 10100
        console.log(res8); // 24
        console.log(res9); // 20
        console.log(res10); // 14

将被转换的数据传入String()函数中

有些值没有toString()，这个时候可以使用String()。比如：undefined和null

将被转换的数据和+""连接到一起

任何数据和 +" " 连接到一起都会转换为字符串
内部实现原理和String()函数一样

        var num1 = 10;
        var res1 = num1 + "";
        console.log(res1); // 10
        console.log(typeof res1); // string

        var num2 = true;
        var res2 = num2 + "";
        console.log(res2); // true
        console.log(typeof res2); // string

        var num3 = undefined;
        var res3 = num3 + "";
        console.log(res3); // undefined
        console.log(typeof res3); // string

        var num4 = null;
        var res4 = num4 + "";
        console.log(res4); // null
        console.log(typeof res4); // string

将其它类型转换为Number类型

将被转换的数据传入Number()函数中

字符串 --> 数字

如果是纯数字的字符串，则直接将其转换为数字

    var str1 = "123";
    var res1 = Number(str1);
    console.log(res1); // 123
    console.log(typeof  res1); // number

如果字符串中有非数字的内容，则转换为NaN

    var str2 = "123ab";
    var res2 = Number(str2);
    console.log(res2); // NaN

如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

    var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0

    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0

布尔 --> 数字

true 转成 1

false 转成 0

    var bool1 = true;
    var res5 = Number(bool1);
    console.log(res5); // 1

    var bool2 = false;
    var res6 = Number(bool2);
    console.log(res6); // 0

null --> 数字 --> 0

    var str5 = null;
    var res7 = Number(str5);
    console.log(res7); // 0

undefined --> 数字 --> NaN

   var str6 = undefined;
   var res8 = Number(str6);
   console.log(res8); // NaN

将被转换的数据传入parseInt()函数中/parseFloat()函数中

Number()函数中无论混合字符串是否存在有效整数都会返回NaN
利用parseInt()/parseFloat()可以提取字符串中的有效整数
两者之前的区别是前者只能提取整数,后者可以提取小数

parseInt()提取字符串中的整数

从第一位有效数字开始, 直到遇到无效数字
如果第一位不是有效数字, 什么都提取不到, 会返回NaN

第一个参数是要转换的字符串，第二个参数是要转换的进制

    var str7 = "300px";
    var res9 = parseInt(str7);
    console.log(res9); // 300

    var str8 = "300px250";
    var res10 = parseInt(str8);
    console.log(res10); // 300

    console.log(parseInt("abc123"));  //返回NaN，如果第一个字符不是数字或者符号        就返回NaN
    console.log(parseInt(""));        //空字符串返回NaN，Number("")返回0

parseFloat提取字符串中的小数
- 会解析第一个. 遇到第二个.或者非数字结束
- 如果第一位不是有效数字, 什么都提取不到
- 不支持第二个参数，只能解析10进制数
- 如果解析的内容里只有整数，解析成整数
```
    var str9 = "20.5px";
    var res11 = parseInt(str9);
    console.log(res11); // 20

    var str10 = "20.5.5.5px";
    var res12 = parseFloat(str10);
    console.log(res12); // 20.5
```
对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作

        var str11 = true;
        var res13 = parseInt(str11); // 这里相当于parseInt("true");
        console.log(res13); // NaN
        var res14 = Number(str11);
        console.log(res14); // 1