js类型转换与引用类型详解(Boolean_Number_String)


Posted in Javascript onMarch 07, 2014

一、类型转换

1.转换成字串
ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。
如:

var sColor = "blue";
alert(sColor.length);//outputs "4"

总而言之,3种主要的原始值Boolean值、数字和字串都有toString()方法。ECMAScript定义的所有对象都有toString()方法,无论它是伪对象,还是真的对象。

Boolean型的toString()方法只是输出"true"或"false",结果由变量的值决定:

var bFound = false;
alert(bFound.toString());//outputs "false"

Number类型的toString()方法比较特殊,它有两种模式,即默认模式和基模式,采用默认模式,toString()方法只是用相应的字符串输出数字值(无论是整数、浮点数还是科学记数法)。
var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString()); //outputs "10"
alert(fNum2.toString()); //outputs "10"

采用Number类型的toString()方法的基模式,可以用不同的基(进制基数)输出数字。
var iNum = 10;
alert(iNum.toString(2));  //outputs "1010"
alert(iNum.toString(8));  //outputs "12"
alert(iNum.toString(16)); //outputs "A"

2.转换成数字
ECMAScript提供了两种把非数字的原始值转换成数字的方法,即parseInt()和parseFloat()。
注意:只有对String类型(Number除外)调用这些方法,才能正确运行对其他类型返回的都是NaN。

例如:

var iNum1 = parseInt("1234blue");//returns 1234
var iNum2 = parseInt("oxA"); //returns 10
var iNum3 = parseInt("22.5"); //returns 22
var iNum4 = parseInt("blue"); //returns NaN

parseInt()方法还有基模式,可以把二进制、八进制、十六进制或者其他任何进制的字符串转换成十进制整数。第二个参数指定按哪一种进制来解析。
var iNum1 = parseInt("AF",16);// returns 175
var iNum2 = parseInt("10",2); // returns 2
var iNum3 = parseInt("10",8); //returns 8
var iNum4 = parseInt("10",10); //returns 10

说明:如果十进制数包含前导0,那么最好采用基数10,否则得到的是八进制的值。
var iNum1 = parseInt("010");  // returns 8
var iNum2 = parseInt("010",8); //returns 8
var iNum3 = parseInt("010",10);//returns 10

parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字串转换成数字。对于这个方法来说,第一个出现的小数点是有效字符。如果用两个小数点,第二个小数点将被看作无效的。使用该方法的另一个不同之处在于,字串必须以十进制形式表示浮点数。
var fNum1 = parseFloat("1234blue"); //returns 1234.0
var fNum2 = parseFloat("0xA"); //returns NaN
var fNum3 = parseFloat("22.5"); //returns 22.5
var fNum4 = parseFloat("22.34.5");//returns 22.34
var fNum5 = parseFloat("0908");//returns NaN
var fNum6 = parseFloat("blue");//returns NaN

3.强制类型转换
ECMAScript中可用的3种强制类型转换如下:

(1).Boolean(value)
把给定的值转换成Boolean型。
当要转换的值是至少有一个字符的字符串、非0数字或对象时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。
如:

var b1 = Boolean(""); // false;
var b2 = Boolean("hi");//true
var b3 = Boolean(100);//true
var b4 = Boolean(null);//false
var b5 = Boolean(0);//false
var b6 = Boolean(new Object());//true

(2).Number(value)
把给定的值转换成数字(可以是整数或浮点数)。
还记得parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串,因此"4.5.6"将被转换为"4.5"。用Number()进行强制类型转换,"4.5.6"将返回NaN,因为整个字符串值不能转换成数字。如果字符串能被完整地转换,Number()将判断是调用parseInt()方法还是调用parseFloat()方法。
如:
Number(false);//0
Number(true);//1
Number(undefined);//NaN
Number(null);//0
Number("5.5");//5.5
Number("56");//56
Number("5.6.7");//NaN
Number(new Object());//NaN
Number(100);//100

(3).String(value)
把给定的值转换成字串。
与调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引发错误:
var s1 = String(null);//"null"
var oNull = null;
var s2 = oNull.toString();//causes an error

二、引用类型
引用类型通常叫作类(class),也就是说,遇到引用值时,所处理的就是对象。ECMAScript定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。

1.Object类
ECMAScript中的所有类都由这个类继承而来,Object类中的所有属性和方法都会出现在其他类中(被覆盖)。

Object类的属性:

(1).Constructor----对创建对象的函数的引用(指针)。对于Object类,该指针指向原始的object()函数。

(2).Prototype----对该对象的对象原型的引用。对于所有的类,它默认返回Object对象的一个实例。

Object类的方法:

(1).HasOwnProperty(property)----判断对象是否有某个特定的属性。必须用字符串指定该属性(例如:o.hasOwnProperty("name"))。

(2).IsPrototypeOf(object)----判断该对象是否为另一个对象的原型。

(3).PropertyIsEnumerable(property)----判断给定的属性是否可以用for..in语句进行枚举。

(4).ToString()----返回对象的原始字符串表示。不同的ECMAScript实现具有不同的值。

(5).ValueOf()----返回最适合该对象的原始值。对于许多类,该方法返回的值都与toString()的返回值相同。

2.Boolean类
在ECMAScript中很少使用Boolean对象,即使使用,也不易理解。
例如:

var oFalseObject  = new Boolean(false);
var bResult = oFalseObject  && true;//outputs  true;

原因:在Boolean表达式中,所有对象都会被自动转换为true。

3.Number类
Number.MAX_VALUE等等特殊值都Number类的静态属性。要得到数字对象的Number原始值,只需要使用valueOf()方法:
var iNumber = oNumberObject.valueOf();
除从Object类继承的标准方法外,Number类还有几个处理数值的专用方法。

toFixed()方法:
返回的是具有指定位数小数的数字的字符串表示。方法能表示具有0到20位小数的数字,超出这个范围的值会引发错误。
如:

var oNumberObject = new Number(99);
aler(oNumberObject.toFixed(2));//outputs "99.00"

toExponential()方法:
返回的是用科学记数法表示的数字的字符串形式。该方法也有一个参数,指定要输出的小数的位数。例如:
var oNumberObj = new Number(99);
alert(oNumberObj.toExponential(1));//outputs "9.9e+1"

toPrecision()方法:
根据最有意义的形式来返回数字的预定形式或指数形式。它有一个参数,即用于表示数的数字总数(不包括指数)。
var oNumberObj = new Number(99);
alert(oNumberObj.toPrecision(1));//outputs "1e+2" ==100

可以看出,toPrecision()方法会对数进行舍入,从而得到尽可能接近真实值的数。
如:
var oNumberObj = new Number(99);
alert(oNumberObj.toPrecision(2));// outputs "99"
alert(oNumberObj.toPrecision(3));// outputs "99.0"

toFixed()、toExponential()和toPrecision()方法都会进行舍入操作,以便用正确的小数位数正确地表示一个数。

toLocaleString()方法:
可以在页面上格式显示,如5210.50显示为5,210.50,但是如果在使用其值时,应该用parseFloat($("N_YJJE").value.replace(//,/g, ""));的形式替换掉逗号,后得到其值。

注意:与Boolean对象相似,Number对象也很重要,不过应该少用这种对象,以避免发生潜在的问题。只要可能,都使用数字的原始表示法。

4.String类
String对象的valueOf()方法和toString()方法都会返回String型的原始值:

alert(oStringObj.valueOf() == oStringObj.toString());//outputs "true"

String类具有属性length,它是字符串的字符个数:
var oStringObj = new String("hello world");
alert(oStringObj.length);outputs "11"

注意:即使字符串包含双字节的字符,每个字符也只算一个字符。

charAt()方法:
返回的是包含指定位置处的字符的字符串:

var oStringObj = new String("hello world");
alert(oStringObj.charAt(1));outputs "e"

charCodeAt()方法:
返回的是包含指定位置处的字符代码的字符串:
var oStringObj = new String("hello world");
alert(oStringObj.charCodeAt(1));outputs "101"

concat()方法:
用于把一个或多个字符串连接到String对象的原始值上。原String对象不变。
var oStringObj = new String("hello ");
var sResult = oStringObj.concat("world");//oStringObj+"world";更常见
alert(sResult);//outputs "hello world"
alert(oStringObj);//outputs "hello"

indexOf()和lastIndexOf()方法返回的都是指定的子串在另一个字符串中的位置(或-1,如果没有找到这个子串)。这两个方法的不同之处大于,indexOf()是从字串的开头(位置0)开始检索子串,而lastIndexOf()则是从字串的结尾开始检索子串的。

localeCompare(),对字符串进行比较(按照字母顺序比较,越后越大)。该方法有一个参数--要进行比较的字符串,返回的是下列3个值之一:
1.如果String对象按照字母顺序排在参数中的字符串之前,返回负数(最常见的是-1,不过真正的返回由实现决定的)。
2.如果String对象等于参数中的字符串,返回0。
3.如果String对象按照字母顺序排在参数中的字符串之后,返回正数(最常见的是1,不过真正的返回由实现决定的)

slice()和substring()方法:
这两个方法返回的都是要处理的字符串的子串,都接受一个或两个参数。第一个参数是要获取的子串的起始位置,第二个参数是要获取子串终止前的位置(终止位置处的字符不包括大返回的值内)。如果省略第二个参数,终止位就默认为字符串的长度。这两个方法都不改变String对象自身的值。

var oStringObj = new String("hello world");
alert(oStringObj.slice(3));//outputs "lo world"
alert(oStringObj.slice(3,7));//outputs "lo w"

注意:对于负数参数,slice()方法会用字符串的长度加上参数,substring()方法则将其作为0处理(也就是说将忽略它)。
var oStringObj = new String("hello world");
alert(oStringObj.slice(-3));//outputs "rld"相当于反向取
alert(oStringObj.substring(-3));//outputs "hello world"
alert(oStringObj.slice(3,-4));//outputs "lo w"
alert(oStringObj.substring(3,-4));//outputs "hel" substring()总是把较小的数字作为起始位,较大的数字作为终止位。

toLowerCase()、toLocalLowerCase()、toUpperCase()和toLocaleUpperCase():
前两种方法把字符串转换成全小写的,后两种方法用于把字符串转换成全大写的。toLocalLowerCase()和toLocaleUpperCase()方法是基于特定区域实现的。

记住:String类的所有属性和方法都可应用于String原始值上,因为它们是伪对象。

5.instanceof运算符
在使用typeof运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回"object"。instanceof方法要示开发者明确地确认对象为某特定类型。如:

var oStrObj = new String("hello world");   
alert(oStrObj instanceof String);//outputs "true"
Javascript 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
JS调试必备的5个debug技巧
Mar 07 #Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 #Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 #Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 #Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 #Javascript
jquery中常用的函数和属性详细解析
Mar 07 #Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 #Javascript
You might like
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python分析apache访问日志脚本分享
2015/02/26 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
django教程如何自学
2020/07/31 Python
关于礼仪的演讲稿
2014/01/04 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
化学专业自荐信
2014/05/28 职场文书
教师求职自荐信
2015/03/26 职场文书
音乐研修感悟
2015/11/18 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers