全面了解JavaScript的数据类型转换


Posted in Javascript onJuly 01, 2016

 首先,由于JavaScript是弱类型语言(弱类型的语言的东西没有明显的类型,他能随着环境的不同,自动变换类型而强类型则没这样的规定,不同类型间的操作有严格定义,只有相同类型的变量才能操作,虽然系统也有一定的默认转换,当绝没有弱类型那么随便,也就是说变量在声明时不需要指定数据类型,变量由赋值操作确定数据类型),所以在JavaScript的类型转换中就存在了强类型语言所没有的隐式转换。

1.1 JavaScript中的隐式转换(自动类型转换)

简单定义: 不同数据类型的数据在做运算的时候可以进行默认的数据类型的转换。
隐式转换通常遵循以下几点规则:

1.数字+字符串:数字转换为字符串。

var n1=12;//number类型
  var n2="12";//string类型
  console.log(n1+n2);//结果为string类型的"1212"

2.数字+布尔值:true转换为1,false转换为0。

var n1=12;//number类型
  var n2=true;//布尔类型
  console.log(n1+n2)//结果为13

 3.字符串+布尔值:布尔值转换为true或者false。

var n1="Hello";//string类型
  var n2=true;
  console.log(n1+n2);//结果为string类型的"Hellotrue"

4.布尔值+布尔值

var n1=true;
  var n2=true;
  console.log(n1+n2);//运行结果为2;

对于上面的案例得到的结果,不确信输出类型的小伙伴可以通过typeof()方法来查看变量的当前类型。

console.log(typeof(11));//number
  console.log(typeof("11"));//string
  console.log(typeof(true));//boolean

1.2 数据类型转换函数

JavaScript中有隐式转换,相对应的就会有显式转换,想要进行显式转换就需要用到下面的几个函数:

1. toString()

---->转换为字符串,在JavaScript中所有数据类型都可以转换为string类型

var n1="12";
  var n2=true;
  var n11=toString(n1);
  var n22=toString(n2);
  console.log(typeof(n11));//得到的结果为string
  console.log(typeof(n22));//得到的结果为string

2.parseInt()

---->解析出一个string或者number类型的整数部分,如果没有可以转换的部分,则返回NaN(not a number)

var n1="12";
  var n2="12han";
  var n3="Hello";
  var n11=parseInt(n1);
  var n22=parseInt(n2);
  var n33=parseInt(n3);
  console.log(n11);//得到的结果为12
  console.log(n22);//得到的结果为12
  console.log(n33);//得到的结果为NaN

运行上面的代码我们不难看出,变量n1 n2 n3转换后的数据类型都是number,但是其中通过函数parseInt()得到的函数n33并不是我们认识的number类型数值,而是为NAN,这就不难看出NaN虽然不是一个数字,但是属于数字类型,只是不能应用到普通数字的任何算法,是一个比较特殊的存在。(后面的博文中会有提到,再次不做赘述)

3.parseFloat()

---->解析出一个string的浮点数部分,如果没有可以转换的部分,则返回NaN(not a number)。

var n1="12.4.5";
  var n2="12.4han";
  var n3="Hello";
  var n11=parseFloat(n1);
  var n22=parseFloat(n2);
  var n33=parseFloat(n3);
  console.log(n11);//得到的结果为12.4
  console.log(n22);//得到的结果为12.4
  console.log(n33);//得到的结果为NaN

通过上面的例子我们可以得出parseFloat()该函数的返回值确实是一个数字,但从几个变量的纵向比较中我们不难看出该函数在遇到第二个小数点之后就不做转换了,此处需特别注意。

以上这篇全面了解JavaScript的数据类型转换就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 #Javascript
浅谈JavaScript中的分支结构
Jul 01 #Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 #Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 #Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 #Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 #Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 #Javascript
You might like
自定义PHP分页函数
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
学习标兵获奖感言
2014/02/20 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
家长给老师的感谢信
2015/01/20 职场文书
售房协议书范本
2015/08/11 职场文书
学习雷锋主题班会
2015/08/14 职场文书