javascript基本数据类型和转换


Posted in Javascript onMarch 17, 2017

ECMAScript中有5种基本数据类型:Undefined、Null、Boolean、Number、String。还有1种复杂数据类型—Object,Object实质上是由一组无序的名值对(键值对)组成的。ECMAScript不支持任何创建自定义类型的机制。

由于ECMAScript是松散型的,所以需要一种手段来检测变量的数据类型,typeof就是具有这种功能的操作符。用typeof检测变量可能返回以下某个字符串:

"undefined" 变量未定义
"boolean" 变量是布尔值
"string" 变量是字符串
"number" 变量是数值
"object" 变量是对象或者null
"function" 变量是函数

从技术的角度讲,函数在ECMAScript中是对象,不是一种数据类型。然而,函数有一些特殊的属性,因此通过typeof来区分函数和其它对象是有必要的。

Undefined类型只有一个值,就是特殊的undefined。在使用var声明变量但未初始化时,这个变量的值就是undefined,如:

var a;
alert(a == undefined);  //true

不过,包含undefined值的变量和尚未定义的变量不一样,如:

var a; // 这个变量声明之后默认取得了undefined值
// 下面这个变量并没有声明
// var b
alert(a);  // "undefined"
alert(b);  // 产生错误

然而对未声明或者声明没有初始化的变量使用typeof都会返回undefined,如:

var a;
// var b;
alert(typeof a); // "undefined"  
alert(typeof b); // "undefined"

Null类型也只有一个值,就是null。从逻辑的角度来看,null值表示一个空指针,所以用typeof检测null值会返回"object",如:

var car = null;
alert(typeof car); // "object"

所以如果要定义变量来存放对象,最好将该变量初始化为null。实际上,undefined值是继承自null值的,所以判断它们的相等性会返回true:

alert(null == undefined);     // true

尽管null和undefined有这样的关系,但它们用途是完全不同的,因为无论什么时候都没有必要把一个变量的值显示的设置为undefined,然而当定义一个还未保存对象的对象变量时,就应该将变量设置为null,这样不仅可以体现null作为空对象的指针,还有能很好地区分null和undefined。

Boolean类型有两个字面值:true和false,但是ECMAScript中所有类型的值都能调用Boolean()函数转换成Boolean类型的值,下表列出了各种数据类型对应的转换规则:

数据类型 转换为true的值 转换为false的值
Boolean true false
String  任何非空字符串 ""空字符串
Number 任何非零数字值 0和NaN
Object 任何对象 null
Undefined / undefined

Number类型分为整数和浮点数,整数可以用十进制,八进制或十六进制表示,如:

var num1 = 22; //十进制整数
var num2 = 070; //八进制的56
var num3 = 079; // 无效的八进制,解析为十进制79
var num4 = 08; //无效的八进制,解析为十进制8
var num5 = 0xA; //十六进制的10
var num6 = 0x1f; //十六进制的31

但是八进制字面量在严格模式下是无效的,在进行算数计算时,所有的数值最终都会转换为十进制数值。浮点数值必须包含一个小数点,如:

var floatNum1 = 1.1;
var floatNum2 = .1; //有效,但不推荐
var floatNum3 = 1.; //小数点后面没有数字,解析为1
var floatNum4 = 10.0; //整数,解析为10

浮点数值的最高精度是17位小数,但在进行算数计算时精确度远不如整数,例如:

var a = 0.1;
var b = 0.2;
var c = a + b; //c的值为0.30000000000000004

NaN,即非数值,是一个特殊的Number值,NaN有两个特点:任何和NaN操作的结果都会返回NaN,NaN与任何值都不相等,包括NaN。使用isNaN()函数可以判断一个值是不是NaN,isNaN()在接收到一个参数时,会尝试将这个值转换为数值,任何不能转换为数值的值都会返回true,如:

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false(10是一个数值)
alert(isNaN("10")); //false(可以被转换为数值10)
alert(isNaN("abc")); //true(不能转换为数值)
alert(isNaN(true)); //false(可以转换为数值1)
var obj = {name:"zhangsan", age:"1"};
alert(isNaN(obj)); //true

isNaN()也能转换对象,对象调用isNaN()时,会首先调用对象的valueOf()方法,然后确定该方法的返回值是否可以转换为数值,如果不能,则用这个返回值再调用toString()方法,再测试返回值。

非数值转换成数值的方法有三个:Number()、parseInt()、parseFloat()。Number()可以转换任何数据类型的值,而parseInt()和parseFloat()只能转换字符串。

Number()函数有以下转换规则:

1.如果是Boolean值,true转换为1,false转换为0;

var num = Number(true); //1
var num2 = Number(false); //0

2.如果是Number值,就和传入的值一样;

var num = Number(1);    //1

3.如果是null,转换为0;

var num = Number(null);    //0

4.如果是undefined,转换为NaN;

var num = Number(undefined);    //NaN

5.如果是String值,要分多种情况,如果是空字符串,则转换为0;如果是纯数字的字符串,则将其转换为相对应的数值,如果字符串是数字且包含".",则将其转换为对应的浮点数值(如果字符串最前面是0,会被忽略),如果字符串是有效的十六进制格式,会将其转换为对应的十进制数值;如果字符串包含上述格式之外的字符,则转换为NaN;如果字符串是对象,会首先调用对象的valueOf()方法,然后确定该方法的返回值是否可以转换为数值,如果结果是NaN,则调用toString()方法,再测试返回值。

var num = Number("Hello World"); //NaN
var num2 = Number(""); //0
var num3 = Number("01"); //1
var num4 = Number("01.1"); //1.1
var obj = {name:"zhangsan", age:"1"};
alert(Number(obj)); //NaN

由于Number()在转换字符串是比较复杂,所以转换字符串常用parseInt()和parseFloat()。这两个函数在转换字符串时,会检测该字符串是否符合数值模式,从第一个非空格字符开始解析,如果第一个字符不是数值或者负号,则返回NaN(包括空字符串)。如果第一个字符是字符串,则继续解析后面的字符,直到解析完所有的字符或者遇到非数字字符。

parseInt()能够识别各种整数格式(十进制、八进制、十六进制),如果字符串以"0x"开头且后跟数字字符,就会被解析为十六进制,如果以"0"开头且后跟数字字符,则会被解析为八进制(ECMAScript5不识别八进制,会将前面的0忽略,解析为十进制)。

var num = parseInt("123Hello"); //123
var num2 = parseInt(""); 
//NaN
var num3 = parseInt("0xA"); 
//10(十六进制)
var num4 = parseInt("22.3"); //22
var num5 = parseInt("070"); //56(ECMAScript3八进制) 70(ECMAScript5十进制)
var num6 = parseInt("23"); //23(十进制)

为了解决兼容性问题,parseInt()提供第二个参数,以何种数值格式解析。

var num1 = parseInt("0xAF", 16);  //175
var num2 = parseInt("AF", 16);  //175,可以省略前面的"0x"
var num3 = parseInt("10", 2);  //2(二进制)
var num3 = parseInt("10", 8);  //8(八进制)
var num3 = parseInt("10", 10);  //10(十进制)
var num3 = parseInt("10", 16);  //16(十六进制)

parseFloat()只识别第一个小数点,后面的小数点就无效了,同时parseFloat()只识别是十进制值,所以没有第二个参数,别的格式数值会被解析为0。

var num = parseFloat("123Hello");  //123
var num = parseFloat("0xA");  //0
var num = parseFloat("12.1");  //12.1
var num = parseFloat("12.1.1");  //12.1
var num = parseFloat("023");  //23
var num = parseFloat("1.1e3");  //1100

String类型值由若干个Unicode字符组成的字符序列构成,可以由单引号('')或者双引号("")表示,但是左右引号必须匹配。

var str1 = "abc";
var str2 = 'abc';<br>var str3 = "abc'; //语法错误

将一个值显式转换为字符串有两种方法,toString()和String(),数值、布尔值、对象和字符串都有toString()方法和String()方法,而undefined和null只有String()方法,toString()的参数是转换的进制格式。

var num = 10;
alert(num.toString());  //"10"
alert(num.toString(2));  //"1010"
alert(num.toString(8));  //"12" 
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"A"
alert(true.toString());  //"true"
String(num);  //"10"
String(true);  //"true"
String(null); //"null"
var num1;
String(num1); //"undefined"

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript onmouseout 解决办法
Jul 17 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
jquery编写日期选择器
Mar 16 #Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php smarty的预保留变量总结
2008/12/04 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
制作特殊字的脚本
2006/06/26 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JS定时器实例
2013/04/17 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
毕业生写求职信的要点
2014/03/04 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
员工开除通知书
2015/04/25 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
学生安全责任协议书
2016/03/22 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python