Web前端的知识之旅哟——类型转换

我们在前面的运算符的部分提过了这个类型转换,这篇文章就主要介绍一下什么是类型转换。

 显示类型转换

类型转换,自然是把数据的类型改变了,那么我们怎么才能知道数据的类型是否发生了改变呢?

我们有一个操作符typeof可以检测数据的类型。



1. console.log(typeof(123)); // number
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

typeof能返回的类型一共只有6种:

numner、string、boolean、undefined、object、function

数组和null类型的都属于object。其实null并不是一种对象,只是因为历史遗留性的问题,null通常用来作为对象占位符,所以被浏览器归到了object里面了。

NaN属于number类型。虽然是非数,但是非数也是数字的一种。

• 同时,typeof返回的结果其实是一种字符串,我们可以用typeof来测试。



1. console.log( typeof(typeof(a))); // string
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

1.Number(mix)

这个方法是可以把其他类型的数据转换成数字类型的数据


1. var demo = Number(‘123’);
2. demo // number123
3. demo = Number(true)
4. demo // 1
5. demo = Number(undefined)
6. demo // NaN
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

2.parseInt(string, radix)

这个方法是将字符串转换成整型类型数字的。其中第二个参数radix基底是可以选择的参数。

当radix为空的时候,这个函数的作用仅仅是将字符串转换成数字。

当参数string里面既包括数字字符串又包括其他字符串的时候,它会将看到其他字符串就停止了,不会继续转换后面的数字型字符串了。


1. parseInt(‘123abc345’) // 123
2. parseInt(‘abc123’) // NaN
3. parseInt(‘123’) // 123
4. parseInt(‘abc’) // NaN
5. parseInt(true) // NaN
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

radix不为空的时候,这个函数可以用来作为进制转换,第二个参数的作用则是,我们把第一个参数的数字当成几进制的数字来转换成十进制

• radix参数的范围是2-36



1. var demo = 10;
2. parseInt(demo, 16) // 16
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

将十六进制的‘10’转换成十进制的16。

3.parseFloat(radix)

这个方法和parseInt方法类似,是将字符串转换成浮点类型的数字,同样是碰到第一个非数字型字符停止,但是由于浮点型数据有小数点,所以它会识别第一个小数点以及后面的数字,但是第二个小数点就无法识别了。


1. parseFloat(‘123.2.3’) // 123.2
2. parseFloat(‘123.2abc’) // 123.2
3. parseFloat(‘123.abc’) // 123
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

4.toString(radix)

这个方法和前面的都一点不同,它是对象上的方法,任何数据类型都可以使用,转换成字符串类型,涉及到包装类的一些知识。

同样radix基底是可选参数,当为空的时候,仅仅代表将数据转化成字符串。



1. var demo = 123;
2. typeof demo.toString(); // string   123
3. typeof true.toString() // string true
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

当写了radix基底的时候,则代表我们要将这个数字转化成几进制的数字型字符串


1. var demo = 10;
2. demo.toString(16) // A
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

undefiend和null没有toString方法

5.String(mix)

和Number类似,把任何类型转换成字符串类型。


1. typeof(String(123)); // string
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

6.Boolean(mix)

和Number类似,把任何类型转换成布尔类型。


1. Boolean(0); // false
2. Boolean(undefined); // false
3. Boolean(null); // false
4. Boolean(‘’); // false
5. Boolean(NaN); // false
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

隐式类型转换

1.isNaN()

这个方法可以检测数据是不是非数类型。


1. isNaN(NaN); // true
2. isNaN(‘abc’); // true
3. isNaN(123); // false
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这中间隐含了一个隐式转换,它会先将你传的参数调用一下Number方法之后,再看看结果是不是NaN,不过这个方法可以检测NaN本身。

2.算术运算符

在前面介绍算术运算符的时候,我们就提到了类型转换。

• ++就是现将数据调用一遍Number之后,再自加一。


1. var demo = ‘abc’;
2. demo ++; //NaN
3. demo = ‘123’;
4. ++demo; //124
5. demo = ‘123’;
6. demo++;  //123
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

放在后面写++,虽然是执行完之后才加一,但是执行之前就会调用Number进行类型转换

 • 同样一目运算符也可以进行类型转换。

+、-、*、/在执行之前都会先进行类型转换,都转换成数字类型的在进行运算。


1. var num = false;
2. +num; // 0
3. var demo = true;
4. -demo; // -1
5. var demo = ‘abc’;
6. +demo; // NaN
7.  1 ‘2’; // 2
8. true false; // 0
9. false / false; // NaN
10. true / false; //infinity无穷大
11. -true / false; //-infinity
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

逻辑运算符也会隐式调用类型转换

&&和||都是先把表达式调用Boolean,换成布尔值再进行判断,看看是true还是false,不过返回的结果还是本身表达式的结果。

!取反操作符返回的结果也是调用Boolean方法之后的结果。



1. !‘abc’; // false
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

• 当然也有不发生类型转换的比较运算符

===严格等于

!==严格不等于


1. ‘123’ === 123; // false;
2. true === ‘true’; // false
3. 1 !== ‘1’; // true
4. 1 !== 1; // false
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)