JavaScript数据类型转换

数据类型转换分为：显示类型转换（又叫强制类型转换）、隐式类型转换。

显示类型转换（强制类型转换）：

parseInt()、parseFloat()
NaN的意义和检测

隐式类型转换：

==、===
减法

显示类型转换（强制类型转换）

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

(a) + (b) = (c)

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




<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>

</div>

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名和变量名进行了适当的修改）。




<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>

</div>

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这个正确的结果。

(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会对变量类型进行隐式转换。比如：




<script>
    var a=5;    //a是number型变量
    var b='5';    //b是string型变量
    alert(a==b);    //弹出的结果是true，因为==会在判断结果为true或false前先将变量类型悄悄地转变成同一类型（这个例子里是数字）
    alert(a===b);    //弹出的结果是false，因为===在进行判断之前不会对变量类型进行转换，number型变量和string型变量当然也就不“相等”了
</script>

var a=5; //a是number型变量

var b='5'; //b是string型变量

alert(a==b); //弹出的结果是true，因为==会在判断结果为true或false前先将变量类型悄悄地转变成同一类型（这个例子里是数字）

alert(a===b); //弹出的结果是false，因为===在进行判断之前不会对变量类型进行转换，number型变量和string型变量当然也就不“相等”了

</script>

显示类型转换（强制类型转换）

隐式类型转换

Yakima Teng

Be First to Comment

发表评论取消回复

JavaScript数据类型转换

显示类型转换（强制类型转换）

隐式类型转换

Yakima Teng

Be First to Comment

发表评论 取消回复

发表评论取消回复