大多数时候,JavaScript解释器能够识别出我们想使用的数据类型。举个例子,在下面的代码中,解释器明白数字1和2是数值类型,并会对它们做相应处理:
<html>
<body>
<script type="text/javascript">
var myCalc = 1 + 2;
document.write( "The calculated number is " + myCalc );
</script>
</body>
</html>
在你的页面中会显示:
The calculated number is 3
可是,如果我们重写代码,使用prompt()函数允许用户输入他自己的数字,我们会得到一个完全不同的结果:
<html>
<body>
<script type="text/javascript">
var userEnteredNumber = prompt( "Please enter a number",
"" );
var myCalc = 1 + userEnteredNumber;
var myResponse = "The number you entered + 1 = " + myCalc;
document.write( myResponse );
</script>
</body>
</html>
如果你在提示框中输入2, 然后你就会被告知:
The number you entered + 1 = 12
JavaScript解释器不是把这两个数加在一起,而是把它们进行了连接操作。这是因为prompt() 函数实际上返回用户输入的值是个字符串数据类型,尽管这个字符串中包含数字字符。连接运算发生在这一行:
var myCalc = 1 + userEnteredNumber;
从效果上看,如果我们写成:
var myCalc = 1 + "2";
它们是一样的。
可是,如果我们使用减法运算符来代替:
var myCalc = 1 - userEnteredNumber;
userEnteredNumber 会从1中减除。 减法运算符不适用于字符串数据,所以JavaScript能计算出我们想把数据当作数值来对待,接着把这个字符串转化成一个数字,然后计算。这个同样适用于*和/运算符。typeof()运算符返回传递给它的参数的数据类型,因此我们可以使用它来看JavaScript正在处理哪种数据类型:
<html>
<body>
<script type="text/javascript">
var userEnteredNumber = prompt( "Please enter a number",
"" );
document.write( typeof( userEnteredNumber ) );
</script>
</body>
</html>
这段代码会把字符串写到页面。确保解释器正在使用我们想要的数值数据类型的方法就是显式地声明这个数据就是一个数字。有3个函数你可以用来这样做:
l Number():设法把括号里的变量值转换成一个数字。
l parseFloat():设法把括号里的值转换成一个浮点数。它从左到右的逐个字符的解析字符串,直到遇到一个字符不能总在数字里。然后它会在那个点停止并把这个字符串转换成数值。如果第一个字符就不能在数字里使用,返回的结果是NaN (它代表不是一个数值:Not a Number)。
l parseInt():把括号里的值转换成一个整数,它不用四舍五入,而是把小数部分直接去掉。任何传递到这个函数中的非数值参数都会被丢弃掉。如果第一个字符不是+、-、或一个阿拉伯数字,返回的结果是NaN。
让我们来看一下这些函数在实际上是如何工作的:
<html>
<body>
<script type="text/javascript">
var userEnteredNumber = prompt( "Please enter a number",
"" );
document.write( typeof( userEnteredNumber ) );
document.write( "<br />" );
document.write( parseFloat( userEnteredNumber ) );
document.write( "<br />" );
document.write( parseInt( userEnteredNumber ) );
userEnteredNumber = Number( userEnteredNumber )
document.write( "<br />" );
document.write( userEnteredNumber );
document.write( "<br />" );
document.write( typeof( userEnteredNumber ) );
</script>
</body>
</html>
试一下输入23.50,你会得到这样的输出:
string
23.5
23
23.5
Number
在第一行中输入的数据被理解成一个字符串。接着parseFloat()函数把23.50从一个字符串转换成一个浮点数,在下一行中parseInt()函数把小数部分给直接去掉(不四舍五入)。然后使用Number()函数把这个变量杯转换成一个数字,并使用变量userEnteredNumber自己来保存结果(覆盖它所保存的字符串),在最后的一行我们可以看到userEnteredNumber的数据类型确实是个数值。
试着在用户提示框中输入23.50abc:
string
23.5
23
NaN
Number
两个结果是非常相似的,但是这次Number()函数返回了NaN。parseFloat()和parseInt()函数仍然返回一个数字,因为它们是从左到右尽可能多的把字符串转换成数字,当遇到一个非数字值得时候才停止。Number()函数会拒绝任何包含非数字字符的字符串(阿拉伯数字,一个合法的小数位,+和-符号是允许的,其它的字符则不行)。
如果你试着输入abc,你应该会得到
string
NaN
NaN
NaN
Number
没有任何一个函数可以发现一个合法的数字,因此它们都返回NaN,我们可以把它看作一个数值数据类型,但不是一个合法的数字。这是一个检查用户输入合法性的很好方法,稍后我们就会使用它来进行校验。
我们回到开始时提出的问题:使用prompt()来重新得到一个数字。所有我们要做的就是使用讨论prompt()函数时用到的其中一个函数,告诉解释器用户输入的数据应该转化成数值数据类型:
<html>
<body>
<script type="text/javascript">
var userEnteredNumber = Number( prompt( "Please enter
a number", "" ) );
var myCalc = 1 + userEnteredNumber;
var myResponse = "The number you entered + 1 = " +
myCalc;
document.write( myResponse );
</script>
</body>
</html>
这样不会抛出任何错误,但是它对用户也没有多大帮助,因为NaN的含义并不是一个常识。稍后我们会处理条件语句,你会了解如何阻止对不了解JavaScript的用户没有意义的输出。
这是到目前为止,关于基本数据类型和变量所有你需要了解的。基本数据类型,你已经明白,可以简单地保存一个值。可是,JavaScript也可以处理复杂的数据,它使用复合(composite)数据类型来实现这个功能。
本文转自 牛海彬 51CTO博客,原文链接:http://blog.51cto.com/newhappy/76833,如需转载请自行联系原作者