老生常谈javascript的类型转换

 更新时间:2016年10月12日 08:56:03   投稿:jingxian  
下面小编就为大家带来一篇老生常谈javascript的类型转换。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

目录:

1 : 伪对象 
2 : 转换为字符串 
3 : 数字转字符串 
4 : 转换为数字 
5 : 转换为Boolean 
6 : Number()和parseInt()的区别 
7 : String()和toString()的区别

1 : 伪对象

伪对象:javascript是一门很有意思的语言,即便是基本类型,也是伪对象,所以他们都有属性和方法。

变量a的类型是字符串,通过调用其为伪对象的属性length获取其长度 。

<script>
 var a="hello javascript"; 
 document.write("变量a的类型是:"+(typeof a));
 document.write("<br>");
 document.write("变量a的长度是:"+a.length);
</script>

运行效果:
变量a的类型是:string
变量a的长度是:16

2 : 转换为字符串

无论是Number,Boolean还是String都有一个toString方法,用于转换为字符串

<script>
 var a=10; 
 document.write("数字 "+a+" 转换为字符串"+a.toString());
 document.write("<br>");

 var b=true; 
 document.write("布尔 "+b+" 转换为字符串"+b.toString());
 document.write("<br>");

 var c="hello javascript"; 
 document.write("字符串 "+c+" 转换为字符串 "+c.toString());
 document.write("<br>");

</script>

运行效果:
数字 10 转换为字符串10
布尔 true 转换为字符串true
字符串 hello javascript 转换为字符串 hello javascript

3 : 数字转字符串

Number转换为字符串的时候有默认模式和基模式两种

<script>
 var a=10; 
 document.write('默认模式下,数字10转换为十进制的'+a.toString()); //默认模式,即十进制
 document.write("<br>"); 

 document.write('基模式下,数字10转换为二进制的'+a.toString(2)); //基模式,二进制
 document.write("<br>"); 
 
 document.write('基模式下,数字10转换为八进制的'+a.toString(8)); //基模式,八进制
 document.write("<br>"); 

 document.write('基模式下,数字10转换为十六进制的'+a.toString(16)); //基模式,十六进制
 document.write("<br>"); 

</script>

运行效果:
默认模式下,数字10转换为十进制的10
基模式下,数字10转换为二进制的1010
基模式下,数字10转换为八进制的12
基模式下,数字10转换为十六进制的a

4 : 转换为数字

javascript分别提供内置函数 parseInt()和parseFloat(),转换为数字

注:如果被转换的字符串,同时又数字和字符构成,那么parseInt会一直定位数字,直到出现非字符。 所以"10abc" 会被转换为 10

思考题: 字符串"10abc8" 又会被转换为多少呢?

<script>
 document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
 document.write("<br>");
 document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("444 3.14"));//转换浮点数
 document.write("<br>");
 document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位,直到发现不是数字的那一位
 document.write("<br>");

 document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("h5555ello javascript")); //如果完全不包含数字,则返

回NaN - Not a Number
 document.write("<br>");

</script>

运行效果:
字符串的"10"转换为数字的:10
字符串的"3.14"转换为数字的:444
字符串的"10abc"转换为数字的:10
字符串的"hello javascript"转换为数字的:NaN

5 : 转换为Boolean

使用内置函数Boolean() 转换为Boolean值
当转换字符串时:
非空即为true
当转换数字时:
非0即为true
当转换对象时:
非null即为true

<script>
 document.write("空字符串''转换为布尔后的值:"+Boolean("")); //空字符串
 document.write("<br>");
 document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串
 document.write("<br>");
 document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0
 document.write("<br>");
 document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0 
 document.write("<br>");
 document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null
 document.write("<br>");
 document.write("非对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在
 document.write("<br>");
</script>

运行效果:
空字符串''转换为布尔后的值:false
非空字符'hello javascript '串转换为布尔后的值:true
数字 0 转换为布尔后的值:false
数字 3.14 转换为布尔后的值:true
空对象 null 转换为布尔后的值:false
非对象 new Object() 转换为布尔后的值:true

6 : Number()和parseInt()的区别 

Number()和parseInt()一样,都可以用来进行数字的转换

区别在于,当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)

parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN

<script>
 document.write("通过Number() 函数转换字符串'123' 后得到的数字:"+Number("123"));  //正常的
 document.write("<br>");
 document.write("通过Number() 函数转换字符串'123abc' 后得到的数字:"+Number("123abc"));  //包含非数字
 document.write("<br>");
 document.write("通过Number() 函数转换字符串'abc123' 后得到的数字:"+Number("abc123"));  //包含非数字
 document.write("<br>");

 document.write("通过parseInt() 函数转换字符串'123' 后得到的数字:"+parseInt("123"));  //正常的
 document.write("<br>");
 document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字:"+parseInt("123abc"));  //包含非数字,返回开头的合法

数字部分
 document.write("<br>");
 document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字:"+parseInt("abc123"));  //包含非数字,以非数字开头,

返回NaN
 document.write("<br>");

</script>

运行效果:

通过Number() 函数转换字符串'123' 后得到的数字:123
通过Number() 函数转换字符串'123abc' 后得到的数字:NaN
通过Number() 函数转换字符串'abc123' 后得到的数字:NaN
通过parseInt() 函数转换字符串'123' 后得到的数字:123
通过parseInt() 函数转换字符串'123abc' 后得到的数字:123
通过parseInt() 函数转换字符串'abc123' 后得到的数字:NaN

7 : String()和toString()的区别

String()和toString()一样都会返回字符串,区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错,无法执行

<script>
 var a = null;
 document.write('String(null) 把空对象转换为字符串:'+String(a)); 
 document.write("<br>"); 
 document.write('null.toString() 就会报错,所以后面的代码不能执行'); 
 document.write(a.toString()); 
 document.write("因为第5行报错,所以这一段文字不会显示"); 
</script>

运行效果:
String(null) 把空对象转换为字符串:null
null.toString() 就会报错,所以后面的代码不能执行

以上就是小编为大家带来的老生常谈javascript的类型转换全部内容了,希望大家多多支持脚本之家~

相关文章

  • postMessage的两种使用方式

    postMessage的两种使用方式

    这篇文章主要介绍了使用postMessage实现iframe跨域通信,第一种使用postMessage在irfame中实现跨域数据传递,第二种使用postMessage在window.open()中的使用,本文结合示例代码给大家详细讲解,需要的朋友跟随小编一起看看吧
    2022-03-03
  • uniapp使用scroll-view实现左右上下滑动功能

    uniapp使用scroll-view实现左右上下滑动功能

    最近在用uni-app开发小程序时,需要用scroll-view做出左右上下滑动效果,所以下面这篇文章主要给大家介绍了关于uniapp使用scroll-view实现左右上下滑动功能的相关资料,需要的朋友可以参考下
    2022-11-11
  • 利用原生JavaScript实现造日历轮子实例代码

    利用原生JavaScript实现造日历轮子实例代码

    这篇文章主要给大家介绍了关于如何利用原生JavaScript实现造日历轮子的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js特效,页面下雪的小例子

    js特效,页面下雪的小例子

    js特效,页面下雪的小例子,需要的朋友可以参考一下
    2013-06-06
  • Web打印解决方案之证件套打的实现思路

    Web打印解决方案之证件套打的实现思路

    这篇文章主要介绍了Web打印解决方案之证件套打的实现思路的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 整理Javascript数组学习笔记

    整理Javascript数组学习笔记

    整理Javascript数组学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习javascript数组,希望大家继续关注
    2015-11-11
  • 微信小程序onLaunch异步,首页onLoad先执行?

    微信小程序onLaunch异步,首页onLoad先执行?

    这篇文章主要介绍了微信小程序onLaunch异步,首页onLoad先执行? 文章底部给大家介绍了小程序_onLaunch异步回调数据加载问题的两种解决方案,需要的朋友可以参考下
    2018-09-09
  • javascript实现在网页任意处点左键弹出隐藏菜单的方法

    javascript实现在网页任意处点左键弹出隐藏菜单的方法

    这篇文章主要介绍了javascript实现在网页任意处点左键弹出隐藏菜单的方法,设计鼠标事件及css样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • javascript跨域刷新实现代码

    javascript跨域刷新实现代码

    在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理,但我还在blog上记一记,有些看似简单的东西,在真实项目应用中还是值得思考地方
    2011-01-01
  • 原生js做的手风琴效果的导航菜单

    原生js做的手风琴效果的导航菜单

    手风琴效果的导航想必大家都有见到过吧,实现的方法也有很多,在本文为大家介绍下使用原生js简单实现下,感兴趣的朋友不要错过
    2013-11-11

最新评论