JavaScript中的数据类型转换

JavaScript中的数据类型转换

typeof 判断数据类型

typeof 数据 = >返回数据的类型
例如  type "aaa"   返回string，得到string

    var a;
    console.log(typeof a); //=> 因为没有赋值，所以它是undefined

    var b=null
    console.log(typeof b); //=>b的类型是object 

tips:在ES5中有一个暂时性死区的bug=>但变量未定义时,使用typeof打印出来的是undefined.在ES6中被修复.

强制转换

主动将数据的类型强制转换为某种类型

强转字符串

• String(数据) 强制转换为字符串

•       String();//=> 强制转换为字符串
        var num=null;
        var a=String(num);
        console.log(a);
  

• 数据.toString(进制) 强制转换为字符串 null和undefined是不能转换的

•       String(); 强制转换为字符串
        var num=null;
        var a=String(num);
  

tips:String()和toString()的区别=>

String()是String类本身上的方法

toString()是String.prototype上的方法,所以得写明是谁调用(每一个类的prototype上都有一个toString()和valueOf()方法,但是每个类上都是重写过了的)

• toString可以将任何数字转换为任意进制，进制必须大于等于2并且小于等于36也就是最小是2进制，最大是36进制，因为数字字母就36个

•       var color=255;
        var c=color.toString(36);
        console.log(c);
  
        //=>扩展
        document.onclick=function(){
            var c="#";
            for(var i=0;i<3;i++){
                c+=Math.floor(Math.random()*256).toString(16);
            }
            document.documentElement.style.backgroundColor=c;
        } 
  

• toFixed(小数点后几位) 将数值转换为字符串，并且按照小数点四舍五入保留位数,任何数据都需要转换为二进制，但是原生js二进制小数转换以后恢复到数值时，是有误差的

•   var num=10.35;
    var a=num.toFixed(1);//=>toFixed()转换的结果是字符串
    console.log(a);//=>在转换时,进不进位,是看小数点后面的第一位是否大于等于5,如果成立,那么当其后面的值大于等于5时便会向前进一
  

tips:浮点数值的最高精度是17位小数,例如:0.1+0.2的值不是0.3,而是0.30000000000000004.所以在真正开发时,不要犯以下代码的错误:

var a = 0.1,b = 0.2;
console.log(a+b == 0.3);

补充:

把其他类型值转换为字符串

1、发生的情况

• 基于alert/confirm/prompt/document.write等方法输出内容的时候，会把输出的值转换为字符串，然后再输出（typeof打印出的值数据类型为string）

typeof(typeof(1))=>string

• 基于”+“进行字符串拼接的时候
• 把引用类型值转换为数字的时候，首先会转换为字符串，然后再转换为数字
• 给对象设置属性名，如果不是字符串，首先转换为字符串，然后再当作属性存储到对象中（对象的属性只能是数字或者字符串）

var n = Math.PI;//=>获取圆周率
n.toFixed(2) => '3.14'

var ary = [12,23,34];
ary.join('+')=>'12+23+34'

2、转换规律

//=>调用的方法：toString
1 ->'1'
NaN -> 'NaN'
null -> 'null'
[] -> ''
[10,20,30] -> '10,20,30'
【对象】
{name:'xxx'} ->'[object object]'
{} -> '[object object]'
不管是啥样的普通对象，最后结果都一样

强转数值

Number(数据)
NaN 非数值 类型是number
纯字符—》 NaN
纯数字—》数字
部分数字，部分字符—》NaN

布尔值—》数字 true—>1 false—>0
undefined—>NaN
null—>0

强转为整数

parseInt(字符,进制) 可以将指定进制方式字符串转换为10进制数值，是toString()逆转换

• 纯字符—》 NaN

• 纯数字—》数字

• 部分数字，部分字符—》 通过parseInt转换数值可以从开始转换到字符前为止变成数值，如果第一位是字符，返回NaN

• 布尔值强转数值整型，会变成NaN

• undefined—>NaN

• null—>NaN

tips:自我理解的Number()和parseInt()的区别=>

• parseInt()在转换括号中的值时,会先调用toString()方法把值转换为字符串形式,再进行操作

•  // 强转为整数
    var str="你好";//纯字符---》NaN
    var  str="20";
    var num=parseInt(str);//如果 第二个没有填值，则表示10进制数值转换
    // num ：20
  
    var str="1010";//纯数字---》整数
    var num=parseInt(str,2);//将2进制字符串转换为数值
    // num ：10
  
    var str="FF";
    var num=parseInt(str,16);//将16进制字符串转换为数值
    console.log(num);// #FF0000
  
    var str="FF0000";
    var num=parseInt(str,16);
    console.log(num);
    // parseInt(字符,进制)  可以将指定进制方式字符串转换为10进制数值，是toString()逆转换
  

• Number()转换,只要被转换的字符串中存在非数字,就会被转换为NaN

把其他数据类型转换为number类型

1、发生的情况

• isNaN检测的时候：当检测的值不是数字类型，浏览器会自己调用number方法把他先转换为数字，然后再检测是否为非数字

isNaN('3') =>false
Number('3') =>3
isNaN(3)=>false

isNaN('3px')=>true
Number('3px')=>NaN
isNaN(NaN)=>true

• 基于parseInt/paresFloat/Number去手动转换数据类型
• 数学运算：+ - * / %，但是‘+’不仅仅是数学运算，还可能是字符串拼接

'3'-1=>2
 Number('3')->3
 3-1=2
 
 '3px'-1=>NaN
 
 '3px'+1=>'3px1'

var i = '3';
i = i + 1;=>'31'
i += 1;=> '31'
i++;//=>3 i++就是单纯的数学运算，已经摒弃了字符串拼接的规则

• 在基于"=="比较的时候，有时候也会把其他值转换为数字类型

//=>转换的方法：Number（浏览器自行转换都是通过这个方法完成的）
/*【把字符串转换为数字】
只要遇到一个非有效数字字符，结果就是NaN*/
''->0
' '->0 //=>空格space
'\n'-0 //=>换行符（Enter）
'\t'->0 //=>制表符（Tab）

//【把布尔转换位数字】
true ->1
false ->0

//【把没有转换为数字】
null ->0
undefined->NaN

/*【把引用类型值转换为数字】
首先都先转换为字符串（toString），然后再转换为数字（Number）
*/

1.对象转数字

强制转换时=>先调用toString()方法把对象转化为字符串=>"[Object object]",再把字符串转换位数字=>Number("[Object object]")=NaN

2.数组转数字

强制转换时=>只有单个数组或者空数组能转换为有效数,其他都为NaN

3.函数转数字

NaN

特殊情况：数字运算和字符串拼接”+“

//=>当表达式中出现字符串，就是字符串拼接，否则就是数学运算

1 + true =>2 数学运算
'1' + true =>'1true'字符串拼接

[12] + 10 =>'1210' 虽然现在没看见字符串，但是引用类型转换为数字类型，首先会转换为字符串，所以变为了字符串拼接
({})+10 =>"[object object]10"//=>如果想要将对象和数字进行运算,那么对象就得加个括号,不然得到的只是数字本身
[]+10 =>'10'

tips:对象和数字类型进行运算时,相当于把一个堆内存和数字相加,但是两者从根本上是不能进行操作的,所以还是得到原数字

{}+10 => 10这个和以上说的没有半毛钱关系，因为它根本不是数学运算，也不是字符串拼接，它是两部分代码=>不管对象中的值是什么都是如此
  {} 代表一个代码块(块级作用域)
  +10 才是我们的操作
  严格写法：{}; +10;

强转为小数

parseFloat(); 强转小数和parseInt类似，只不过可以保留小数位

转换为布尔值

Boolean(数据) 转换为布尔值
"" , 0 , false , undefined , null , NaN 转换为布尔值都会变成false，除此之外转换都是true

隐式转换

当数据类型不相同时，做数据的运算，就会自动将两端的数据转换为相同类型然后运算，这是隐式转换
隐式转换遵从与 String() Number() Boolean()