JS类型（二）: JS 类型转换

fjcgreat 发布于2019-08-21 17:16 / 1525人阅读

前言

在第一篇文章中，讲解了关于“==”时，JS做的类型转换。从第一篇文章中可以发现 == 时，基本类型都朝着数字类型转换，还是贴出上篇文章的图：

那么JS类型转换都是按照这个模式进行转换的吗？例如null能转换成数字类型吗？如果能，会转换成多少？

   const data = 1 + null;
   data;// 1

你想到这个结果了吗？

正文 基本类型转换

下面是JS类型转换的图表：

图表显示null转换成了0。等等。。。不是说null没有toString和valueOf的方法的吗？怎么能转换成数字呢？？

这完全不符合第一篇 == 的套路啊！

具体怎么回事呢？

问题在于JS类型转换只存在于“==”的时候吗？肯定不是！

除了==符号会产生类型转换，"+" "-" "*" "／" ">""<"等符号也会使JS发生类型转换，所以==的类型转换规则不是万能的，只适用于== 。那么应该如何记住类型转换这张表格呢？其实大部分转换规则是可以根据第一篇文章讲的==的转换规则得出正确答案的，只是有几个特殊的例子罢了。

第一篇文章讲到了 {}会转换成字符串"[object Object]",则：

比较特殊的就是undefined null类型：
（1）在进行 == 的时候，undefined null 会尝试转换成基本类型，但是不存在toString valueOf方法，所以无论如何是转换不成基本类型的。
（2）在做字符串拼接的时候会按照表里面的转换成字符串的规则
（3）在做数值运算的时候会按照表中转换成数字的规则
最特殊的就是前言中介绍的null转换为0!

表格中{}转换成字符串类型和数值类型通常如下：

这样就能记住这张类型转换表了。注意这张类型转换表适用于所以发生类型转换的情况哦。

Object类型转换成基本类型

ECMAScript内部有一个函数 ToPrimitive() (这个函数不能在javascript中调用), 下面是转换规则:

 ToPrimitive(input, PreferredType?)

这个可选的 PreferredType 表示最终要转换成的基本类型: 它是数字类型或者字符串类型,这取决于ToPrimitive()的结果是否可以转换成一个数字还是一个字符串。
如果PreferredType 是数字类型, 转换将遵循以下步骤:

如果输入的是基本类型，就直接返回它

如果输入的是Object
（1）会先调用 input.valueOf()。如果结果是基本类型就返回它
（2）如果input.valueOf()不是基本类型，就会调用input.toString()，如果结果是基本类型就返回它
（3）如果还不能得到基本类型，就会抛出TypeError错误

如果PreferredType 是String, 第二条的（1）（2）顺序反转一下。

有个地方需要注意，如果指定了要转换的类型，则会优先调用转换的方法，例如：

 var s = { toString: function () { return "7"; } }; 
 
 String(s);// toString() => "7"
 Number(s);// valueOf() => 7

Number() 与 parseInt()/parseFloat()

1.Number(num) 会对boolean string null 类型做一些转换：

parseFloat(true); // same as parseFloat("true") => NaN
Number(true); // 1

parseFloat(null); // same as parseFloat("null") => NaN
Number(null); // 0

parseFloat(""); // NaN
Number(""); // 0

也就是说Number走的是类型转换那张表。
我们经常使用 +[number]的形式来实现Number(number)。

2.parseInt(num，radix)/parseFloat(num,radix)可以设置解析的进制radix,并且会解析出合法的部分:

 parseFloat("123.45#")； // 123.45
 Number("123.45#"); // NaN

parseFloat("	v
12.34
");

parseInt()/parseFloat()才是真正的解析数字。

3.使用parseInt()去解析数字会有问题

Don’t use parseInt() to convert a number to an integer:coercion to string is an unnecessary detour and even then, the result is not always correct.（《SpeakingJavascript》）

情况一：整数>=21bit之后会用e表示数字大小

 parseInt(1000000000000000000000.5, 10); // 1
 首先转换成字符串：
 String(1000000000000000000000.5)； // "1e+21"

情况二：小数部分>=7bit会用e表示数字大小

parseInt(0.0000008, 10); // 8
String(0.0000008); // "8e-7"

总结：
1.大多情况下优先使用Number()
2.如果确定是解析字符串，并且取里面能提取出的数字，这种情况下使用parseInt()/parseFloat()
3.非十进制解析的情况下使用parseInt()/parseFloat()

后记

猜测：

在做== 运算时：右侧世界undefined null ，永远不等于左侧的世界中的值，是因为undefined null 想转换成基本类型（和引用类型处理方式一致），但是它们没有toString valueOf方法；

这一篇undefined null 类型转换还可以看出：例如 + 运算，JS会根据实现，按照表格中的JS类型转换，{}转换成字符串[object Object],null装换成数字0。

云服务器 GPU云服务器 js怎么转换类型数据类型 js类型转换 js转换成时间类型数据类型 js 数据类型转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89331.html

js基础知识学习（二）

摘要：基础知识数据类型转换把其它数据类型转换为类型在进行加减乘除数学运算的时候引用数据类型转换数字通过方法把数组转换为字符串，然后在调用把字符串转换为数字中的数学运算加减乘除除了加法有特殊性，其余的运算符都是数学运算，也就 JS基础知识 JavaScript 数据类型转换把其它数据类型转换为number类型 isNaN 、Number、parseInt、parseFloat在进行加减乘除数...

Dean 2019-08-22 18:17 评论0 收藏0
你不知道的JavaScript（二）

摘要：第三章原生函数有很多原生函数，为基本的数据类型值提供了封装对象，，，等。我们可以通过来查看所有返回的对象的内置属性这个属性无法直接访问。这个符号能有奇妙的功能，可以视为。通常用来把转换为数字，用来将转换为字符串，用来将取整。第三章原生函数JS有很多原生函数，为基本的数据类型值提供了封装对象，String，Number，Boolean等。我们可以通过{}.call.toStri...

macg0406 2019-08-22 15:23 评论0 收藏0
javascript基础

摘要：一弹窗和输出执行顺序是从上到下执行控制浏览器弹出一个警告框让计算机在页面中输出一个内容在中写一个内容写可以向中输出一个内容看我出不出来向控制台输出一个内容作用是向控制台输出一个内容你猜我在哪出来二编写位置可以将代码编写到外部文件中，然后通过一.弹窗和输出 **javascript执行顺序是从上到下执行** 1.控制浏览器弹出一个警告框 alert(HelloWord); 2.让计...

XFLY 2019-08-23 17:55 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0