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