青青子衿,悠悠我心
但为君故,沉吟至今

JavaScript数据类型转换

数据类型转换分为:显示类型转换(又叫强制类型转换)、隐式类型转换。

  • 显示类型转换(强制类型转换):
    • parseInt()、parseFloat()
    • NaN的意义和检测
  • 隐式类型转换:
    • ==、===
    • 减法

显示类型转换(强制类型转换)

先看下面这个例子。在这个例子中我们想要实现的功能是在a和b对应的文本框内输入数字后,再点击“求和”按钮后,在c对应的文本框中输出a+b的计算结果。

(a) + (b) = (c)

上面这段内容的代码如下(div元素里的这些input的代码我本来是分行写的,但不知道是wordpress的原因还是这个wordpress主题的原因,我分开写的话,这些元素在页面中就分行显示了,尽管我写了style=”display: inline;”。我试过,在单独的HTML页面中分开写是没问题的,但不知道为什么在这里就是不行,所以我把那几行代码写成了一行,这种情况下就不会出问题了):

好了,现在我们在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名和变量名进行了适当的修改)。

上面这段新代码在页面上显示为如下。现在我们再试试让给a=1.2,b=2.3,点击“求和”按钮后,可以看到c=3.5这个正确的结果。

(a) + (b) = (c)

上面我们同时提到了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会对变量类型进行隐式转换。比如:

赞(0) 打赏(金额可随意指定)
未经允许不得转载:云阁轩 » JavaScript数据类型转换
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

其他地方 也 能 看到我

Github豆瓣读书

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏