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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python二元表达式用法
2019/12/04 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
法学专业求职信
2014/07/15 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书