[JavaScript]-2-js变量与数据类型
引言
这篇文章介绍HTML文档中,JavaScript的变量声明与数据类型。
文章目录
0×1.变量的声明与规范
JavaScript中,变量的声明使用关键词var,并遵循下面这几点规则:
* 由字母、数字、下划线、$符号组成,且不能以数字开头;
* 不能是关键字和保留字,例如:for、while;
* 区分大小写;
下面而是一些符合规则的变量命名方式:
<script type="text/javascript"> var aUser="qingsword"; var bUser="qingsword.com"; var userPassword="123456"; </script>
下面而是一些不符合规则的变量命名方式:
<script type="text/javascript"> var 1aUser="qingsword"; var 2bUser="qingsword.com"; var &number=1; </script>
注:如果出现了不符合规范的js语法,或者不符合规范的变量命名,会在浏览器调试页面(火狐浏览器鼠标右键,检查,或F12),在调试页面的Console标签中可以看到具体的报错。
下面是js中几种变量的声明与调试方法:
<script type="text/javascript"> //声明两个变量,赋值,并进行运算 var xValue=100,yValue=200; var xValue=xValue+yValue; //方法一:通过弹窗显示运算结果 alert(xValue); //方法二:通过控制台显示运算结果(会出现在浏览器调试页面的Console标签中),这个功能通常用于代码调试 console.log(xValue,yValue); //通过document.write函数将变量值打印到页面上 document.write(xValue,"|",yValue); </script>
0×2.JS中常用的几种数据类型
JS中有六种常见的数据类型如下:
Number、String、Boolean、Undefined、Null 、Object;
* Number代表数值类型,例如:22,23,80,1433,3306,3389,0.233;
<script type="text/javascript"> //声明一个整形变量 var iNumber=3306; //声明两个浮点数 var fNumber1=0.1; var fNumber2=0.2; //对一部分浮点数的运算存在精度问题,例如0.1+0.2会等于0.300000x,不会等于0.3 //但是有一部分又不会出现这种问题,例如0.3+0.5会等于0.8 var fNumber3=fNumber1+fNumber2; //直接将fNumber3与0.3做比较,Console中会返回一个false console.log(fNumber3==0.3); //如果遇到这种精度问题,可以先将浮点数转换成整形计算,再转换回去,例如 var fNumber4=(fNumber1*10+fNumber2*10)/10; //true console.log(fNumber4==0.3); </script> //最好避免浮点数的加减法,如果一定要用,先转化成整形
* String代表字符串类型,例如:"qingsword.com","www.qingsword.com","hello world";
<script type="text/javascript"> //声明一个字符串变量 var iWebsite="qingsword.com"; //使用转义字符在控制台窗口打印出"Welcome to my web site 'qingsword.com'" //加号可以用于字符串的拼接,在加号两边只要存在字符串,加号就用于字符串拼接,如果加号两边都是数字,就做加法运算 console.log("\"Welcome to my web site \'"+iWebsite+"\'\""); </script> //转义字符在PHP或JS文件中常用于对代码的简单加密,隐藏正真的代码内容 \xnn这种转义字符,其中n可以是0~F中的任意一个,代表十六进制ASCII编码,例如:\x41表示大写的A //一些木马文件中,喜欢使用明文与ASCII十六进制编码混合的方式,如下 {"G\x4c\x4f\x42\x41\x4cS"} //翻译过来就是 {"GLOBALS"} \unnnn这种转义字符,其中的n可以是0~F中的任意一个,代表了Unicode编码,例如:\u03a3代表符号∑ //要特别注意JS或PHP文件中的这种混合编码方式存在的文件,除了能够用来隐藏真实意图之外,还能逃过杀毒软件的查杀 //获取字符串长度,通过length属性 console.log(iWebsite.length);
* Boolean包含真或假,例如:true,false;
<script type="text/javascript"> //声明一个Boolean变量,在js中还可以用1表示true,用0表示false var iBool=true; </script>
* Undefined就包含一个值:Undefined;
<script type="text/javascript"> //变量被声明但未赋值,默认就是undefined类型 var iUndefined=undefined; var aUndefined; </script>
* Null代表不存在的值(一个很尴尬的设计悖论);
<script type="text/javascript"> //声明一个Null变量 var iNull=null; //undefined和null //单纯判断值是否相等,结果为true console.log(undefined==null); //如果使用三等号判断值和数据类型是否相等,结果为false console.log(undefined===null); </script>
* Object就代表可以保存多种数据的复杂Object对象;
<script type="text/javascript"> //声明一个Object对象 var iObject=new Object(); </script>
可以通过typeof来判断一个变量是哪种数据类型:
<script type="text/javascript"> var iObject=new Object(); var iWebsite="qingsword.com"; //下面两种写法都可以,在Console中打印出对应变量的值(也可以使用document.write打印到页面上) console.log(typeof(iObject)); console.log(typeof iWebsite); </script>
可以打开本页的浏览器调试器,查看Console中打印出的两个值,object和string,我在这一句的下方插入了一个script标签,与上面代码段中的内容一样。
注:null使用typeof输出会得到Object类型,除此之外,其他类型的变量都能返回对应的数据类型。
0×3.常用数据类型的相互转换
* 其他类型转字符串类型
<script type="text/javascript"> //定义两个整形 var aNum=233; var bNum=456 //下面这三种方法,都可以用于字符串转换,将整形转化成字符串类型 //使用加号给整形加上空字符串,也同样可以将整形转化成字符串类型 var aString=aNum.toString(); var bString=String(bNum); var cString=aNum+""; //在google浏览器控制台窗口中数字以蓝色显示,字符串以黑色显示 console.log(aNum); console.log(bNum); console.log(aString); console.log(bString); console.log(cString); //null与undefined这两种特殊的数据类型转化成字符串,只能通过String()方法 console.log(String(undefined)); console.log(String(null)); </script>
* 其他类型转字数值类型
//使用Number函数 <script type="text/javascript"> //分别定义了不同类型的变量 var aStr="233",bStr="qingsword.com",cNull=null,dUndefined=undefined,eTrue=true; //方法一,通过Number函数,转换结果如下 //233,NaN,0,NaN,1 //null被转化成了0,非数字会被转化成NaN,NaN在js中是数值类型,当使用转换函数时,如果数据不能转化成数字,就会返回一个NaN数值类型,bool类型会被转化成1或0 console.log(Number(aStr)); console.log(Number(bStr)); console.log(Number(cNull)); console.log(Number(dUndefined)); console.log(Number(eTrue)); //特殊情况:NaN与自身以及任何数值类型都不相等 console.log(NaN==NaN); //false console.log(NaN==233); //false //判断数值类型是否为NaN,需要使用isNaN函数 console.log(isNaN(aStr)); //false console.log(isNaN(Number(bStr))); //true </script>
//使用parseInt函数 <script type="text/javascript"> var aStr="233.233",bStr="qingsword.com",cNull=null,dUndefined=undefined,eTrue=true; var aNum=12,afNum=233.999; //控制台返回结果如下 //233,NaN,NaN,NaN,NaN,12,233 //parseInt函数对无法转换的数据类型也同样返回NaN //对小数直接取整且不四舍五入 console.log(parseInt(aStr)); console.log(parseInt(bStr)); console.log(parseInt(cNull)); console.log(parseInt(dUndefined)); console.log(parseInt(eTrue)); console.log(parseInt(aNum)); console.log(parseInt(afNum)); </script>
//使用parseFloat函数 <script type="text/javascript"> var aStr="233.233",bStr="qingsword.com",cNull=null,dUndefined=undefined,eTrue=true; var aNum=12,afNum=233.999; var fStr="23qingsword.com",gStr="qingsword.com.23" //返回结果如下 //233.233,NaN,NaN,NaN,NaN,12,233.999,23,NaN //对首字母包含数字的字符串不论parseInt函数还是parseFloat函数都能将字符串前面的数字提取出来 //但是对字符串中间或者结尾包含数字的字符串,这两个函数无法处理,返回NaN console.log(parseFloat(aStr)); console.log(parseFloat(bStr)); console.log(parseFloat(cNull)); console.log(parseFloat(dUndefined)); console.log(parseFloat(eTrue)); console.log(parseFloat(aNum)); console.log(parseFloat(afNum)); console.log(parseFloat(fStr)); console.log(parseFloat(gStr)); </script>
//使用运算符进行转换 <script type="text/javascript"> var aStr="233.233"; console.log(aStr+0); //返回字符串233.2330 console.log(aStr-0); //返回数值233.233 console.log(+aStr); //返回数值类型233.233 console.log(-aStr); //返回数值类型-233.233 console.log(aStr*1); //返回数值类型233.233 console.log(aStr/1); //返回数值类型233.233 </script>
* 其他类型转布尔类型
//使用运算符进行转换 <script type="text/javascript"> var a = Boolean('0'); var b = Boolean(0); var c = Boolean('1'); var d = Boolean(null); var e = Boolean(undefined); var f = Boolean(NaN); console.log(a,b,c,d,e,f); //true false true false false false // 0、''(空字符串) 、null、 undefined 、NaN 会转换成false 其它都会转换成true </script>