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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
vue的三种图片引入方式代码实例
Nov 19 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
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python分割和拼接字符串
2013/11/01 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
办理护照介绍信
2014/01/16 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
高中运动会入场词
2014/02/14 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
放射科岗位职责
2015/02/14 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server