JS 类型转换常见方法小结


Posted in Javascript onMay 31, 2010

一、类型转换

1.转换成字串

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

Js代码

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

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

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

Js代码

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

Number类型的toString()方法比较特殊,它有两种模式,即默认模式和基模式,采用默认模式,toString()方法只是用相应的字符串输出数字值(无论是整数、浮点数还是科学记数法)。
Js代码

var iNum1 = 10; 
var fNum2 = 10.0; 
alert(iNum1.toString()); //outputs "10" 
alert(fNum2.toString()); //outputs "10" 
var iNum1 = 10; 
var fNum2 = 10.0; 
alert(iNum1.toString()); //outputs "10" 
alert(fNum2.toString()); //outputs "10"

采用Number类型的toString()方法的基模式,可以用不同的基(进制基数)输出数字。
Js代码

var iNum = 10; 
alert(iNum.toString(2)); //outputs "1010" 
alert(iNum.toString(8)); //outputs "12" 
alert(iNum.toString(16)); //outputs "A" 
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。

例如:
Js代码

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 
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()方法还有基模式,可以把二进制、八进制、十六进制或者其他任何进制的字符串转换成十进制整数。第二个参数指定按哪一种进制来解析。
Js代码

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 
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,否则得到的是八进制的值。
Js代码

var iNum1 = parseInt("010"); // returns 8 
var iNum2 = parseInt("010",8); //returns 8 
var iNum3 = parseInt("010",10);//returns 10 
var iNum1 = parseInt("010"); // returns 8 
var iNum2 = parseInt("010",8); //returns 8 
var iNum3 = parseInt("010",10);//returns 10

parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字串转换成数字。对于这个方法来说,第一个出现的小数点是有效字符。如果用两个小数点,第二个小数点将被看作无效的。使用该方法的另一个不同之处在于,字串必须以十进制形式表示浮点数。

Js代码

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 
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。
如:
Js代码

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 
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()方法。
如:
Js代码

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 
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值强制类型转换可以生成字符串而不引发错误:
Js代码

var s1 = String(null);//"null" 
var oNull = null; 
var s2 = oNull.toString();//causes an error
Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 #Javascript
LazyLoad 延迟加载(按需加载)
May 31 #Javascript
基于jquery的气泡提示效果
May 31 #Javascript
niceTitle 基于jquery的超链接提示插件
May 31 #Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 #Javascript
jQuery 获取对象 定位子对象
May 31 #Javascript
jQuery 获取对象 基本选择与层级
May 31 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python实现字符串加密成纯数字
2019/03/19 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
环境工程专业个人求职信
2013/12/05 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书