JavaScript数据类型转换

09-JavaScript基础-数据类型转换

数据类型转换

• 什么是数据类型转换

  • 将一个数据类型转换为其他的数据类型，比如：将String转换为Number类型，将Number类型转换为Boolean类型… …

• toString()

  • 将其他类型的数据转换为字符串类型

      var num = 12306;
      var str = num.toString();
      console.log(str); //12306
      console.log(typeof str); //string
  
      var num1 = true;
      var str1 = num1.toString();
      console.log(str1); //true
      console.log(typeof str1) //string

  • 注意：null和undefined没有toString()方法，如果强行调用，则会报错

      var num2 = undefined;
      var str2 = num2.toString() //报错
  
      var num3 = null;
      var str3 = num3.toString(); //报错
  
      var num4 = NaN;
      vat str4 = num4.toString();
      console.log(str4); //NaN
      console.log(typeof str4); //string

  • toString()不会影响到原变量，它会将转换的结果返回

      var num5 = 10;
      var str5 = num5.toString();
      console.log(typeof num5); //number
      console.log(typeof str5); //string

• String()函数

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

• +

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

      var num1 = 100;
      var res1 = num1 + "";
      console.log(res1); // 100
      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()函数

  • 字符串转数字

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

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

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

        var str2 = "it666";
        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

    • undefined转数字

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

    • null转数字

        var str5 = null;
        var res7 = Number(str5);
        console.log(res7); // 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

• parseInt()函数和parseFloat()函数

  • Number()函数中无论混合字符串中是否存在有整数都会返回NaN，利用parseInt()或者parseFloat()可以提取字符串中的有效整数

  • 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()提取字符串中的小数

    • 会解析第一个. 遇到第二个. 或者非数字结束
    • 如果第一位不是有效数字，什么都提取不到
    • 不支持第二个参数，只能解析出十进制
    • 如果解析的内容只有整数，则解析为整数

        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