数据类型转换分为:显示类型转换(又叫强制类型转换)、隐式类型转换。
- 显示类型转换(强制类型转换):
- parseInt()、parseFloat()
- NaN的意义和检测
- 隐式类型转换:
- ==、===
- 减法
显示类型转换(强制类型转换)
先看下面这个例子。在这个例子中我们想要实现的功能是在a和b对应的文本框内输入数字后,再点击“求和”按钮后,在c对应的文本框中输出a+b的计算结果。
上面这段内容的代码如下(div元素里的这些input的代码我本来是分行写的,但不知道是wordpress的原因还是这个wordpress主题的原因,我分开写的话,这些元素在页面中就分行显示了,尽管我写了style=”display: inline;”。我试过,在单独的HTML页面中分开写是没问题的,但不知道为什么在这里就是不行,所以我把那几行代码写成了一行,这种情况下就不会出问题了):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="exampleDiv"> <input id="txtA" type="text" style="display: inline;">(a) + <input id="txtB" type="text" style="display: inline;">(b) = <input id="txtC" type="text" style="display: inline;">(c)<input id="btn1" type="button" value="求和" style="display: inline;"> </div> <script> var oTxtA=document.getElementById('txtA'); var oTxtB=document.getElementById('txtB'); var oTxtC=document.getElementById('txtC'); var oBtn1=document.getElementById('btn1'); oBtn1.onclick=function(){ oTxtC.value=oTxtA.value + oTxtB.value; } </script> |
好了,现在我们在a文本框内输入数字5,在b文本框内输入数字8,然后猜一下当我们点击“求和”按钮后会出现什么?我们觉得c文本框内应该会显示13。但是你自己动手试试看,显示的其实是58,这是为什么呢?
解释如下:尽管我们在a文本框内输入的是数字,但是我们在JavaScript中执行计算的时候,写的并不是oTxtC.value=5 + 8;
,而是oTxtC.value=oTxtA.value + oTxtB.value;
,问题就出在这些value上,这些value其实已经默默的将对应的数字转变成了字符串。如果用alert(typeof oTxt.value)
,浏览器会弹出“string”。
那怎么办呢?我们需要强制将value的值重新转换成数字,这个时候parseInt()和parseFloat()这两个函数就可以发挥作用了。现在我们将代码修改成下面的样子(注意,为了避免和上面的代码冲突,在下面的新代码中我对id名和变量名进行了适当的修改)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="exampleDiv"> <input id="txtA2" type="text" style="display: inline;">(a) + <input id="txtB2" type="text" style="display: inline;">(b) = <input id="txtC2" type="text" style="display: inline;">(c)<input id="btn12" type="button" value="求和" style="display: inline;"> </div> <script> var oTxtA2=document.getElementById('txtA2'); var oTxtB2=document.getElementById('txtB2'); var oTxtC2=document.getElementById('txtC2'); var oBtn12=document.getElementById('btn12'); oBtn1.onclick=function(){ oTxtC2.value=parseFloat(oTxtA2.value) + parseFloat(oTxtB2.value); } </script> |
上面这段新代码在页面上显示为如下。现在我们再试试让给a=1.2,b=2.3,点击“求和”按钮后,可以看到c=3.5这个正确的结果。
上面我们同时提到了parseInt()和parseFloat()这两个函数,但是我们实际上只用了后者。这二者的作用和区别在哪呢?正如这两个函数的名称所示,前者将变量解析成整数,后者将变量解析成浮点数。并且,parseInt()和parseFloat()这两个函数还有一个特点,就是当他们解析一串字符串时,它们会按照从左往右的顺序进行解析,在遇到无法解析成整数/浮点数的字符时,就会忽略后面的内容(不管后面是否还有整数/浮点数)直接返回解析结果。它们还有个特点是,当解析不出整数/浮点数时,它们会返回一个“NaN”(Not a Number)的结果。下面的几个例子可以帮助你加深理解和记忆。
- parseInt(1.8) //得到整数1(并没有四舍五入!parseInt()遇到小数点就直接结束解析返回结果了)
- parseInt(13px) //得到13,后面的px被忽略了
- parseInt(’19px20′) //得到19,后面的20跟px一样都被忽略了
- parseFloat(‘px20’) //得到NaN,因为第一个字符就不是数字,所以该函数直接忽略后面的内容返回结果了,返回NaN结果的意思是告诉我们,返回的结果不是数字(或者数字的范围在JavaScript允许的数字范围之外的话,也会返回NaN,所以这里更谨慎的说法是,当返回的内容不是JavaScript可识别的数字的情况下,该函数会返回NaN结果,以表示所返回的结果不是JavaScript可识别的数字)
闲扯一下NaN,如果你想判断一个变量是否为NaN,不能用if (a==NaN),因为即便a为NaN,这个判断语句返回的结果也是false,因为NaN==NaN的返回结果就是false。要判断一个变量是否为NaN,JavaScript特别为我们提供了isNaN()函数。其实NaN不等于NaN的原因很好理解,可以这么想,假设a是JavaScript能识别的最大的数字,那么a+1就是NaN,a+1203568很明显也是一个NaN,由于NaN有非常非常多的可能性,所以任意两个NaN相等的概率几乎就是0,是不可能事件。
隐式类型转换
当我们对两个不同类型的变量进行比较的时候,JavaScript会对变量类型进行隐式转换。比如:
1 2 3 4 5 6 7 8 |
<script> var a=5; //a是number型变量 var b='5'; //b是string型变量 alert(a==b); //弹出的结果是true,因为==会在判断结果为true或false前先将变量类型悄悄地转变成同一类型(这个例子里是数字) alert(a===b); //弹出的结果是false,因为===在进行判断之前不会对变量类型进行转换,number型变量和string型变量当然也就不“相等”了 </script> |
最新评论
你真是太棒了,因为你的这篇博客我也修复了同样的问题。
还以为你退坑了呢,哈哈哈~
Sorry,改版改丢掉了,之前服务器也挂了很久一直没恢复,昨天才花时间去修了mysql不能重启的问题,我今天加上
大佬下了我的友情链接了吗?(哭)
人生有梦,各自精彩
看了这篇文章,不知道说什么好……个人还是认为,当前社会的爱情还是建立在物质上的。程序员做事往往会考虑很多未来的事情,也许这就是为什么程序员容易单身吧!
我也是13年本科毕业,一直在药企,对于“为什么从药学行业转向前段”有不同看法。你对制药行业的评价说明你对这个行业的不了解,而且个人认为每个行业都有它各自的问题,只是同一行业不同企业之间存在问题的大小和
帮助很大,多谢分享。