您的位置:首页> 前端教程> JS教程
文章导航

JavaScript 数据类型转换

2018-12-19 15:00| 作者: admin| 查看: 876| 评论: 0

数据类型转换在转换方式分为两种:

(1).显式数据类型转换,指定由某种类型转换到另一种类型。

(2).隐式数据类型转换,代码根据上下文自动判断类型转换。

数据类型的转换又可以分为三种:

(1).值类型之间数据转换。

(2).值类型转换到引用类型。

(3).引用类型转换到值类型。

首先看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
console.log("15"==15);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145635f0sff3afdysxcudd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

字符串与数字也可以比较大小,因为进行隐式数据类型转换。

首先将字符串"15"转换为数字15,再进行大小比较。

一.值类型之间数据转换:

JavaScript中的数据类型本文不再介绍,参阅JavaScript 数据类型一章节。

当前具有的值类型有如下六种:

(1).boolean

(2).string

(3).number

(4).null

(5).undefined

(6).symbol(ES2015

特别说明:

(1).null与undefined都属于自有类型,也就是说null类型与undefined类型下都只有一个数据,null与undefined。

(2).typeof null返回值虽然是object,但它实质是一个值类型数据,这是一个ES设计问题,以后可能会修复。

值类型转换规则如下:

将要转换的数据字符串数字布尔值
undefined
null
"undefine"
"null"
NaN
0
false
false
true
false
"true"
"false"
1
0
true
false
""
"8.8"
"ant88"
""
"8.8"
"ant88"
0
8.8
NaN
false
true
true
0
-0
NaN
Infinity
-Infinity
8(普通数字)

"0"

"0"

"NaN"
"Infinity"

"-Infinity"

"8"      

0
-0
NaN
Infinity
-Infinity
8
false
false
false
true

true

true

上述代码演示值类型之间数据类型转换的规则,可以起到举一反三的作用。

如果是隐式数据类型转换,上述规则完全适用,但是如果要显式转换,则需要根据实际使用的转换方式。

比如使用parseFloat方法,则会得到不同的转化结果,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let numStr="88ant";
console.log(+numStr);
console.log(parseInt(numStr));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145642ohc4qwswhcuh2pc6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

转换结果完全不同,代码分析如下:

(1).使用加号会将字符串转换为数字,进行隐式数据类型转换,转换失败。

(2).使用parseInt毫无疑问将转换成功。

二.值类型转换为引用类型:

值类型数据转换为对应的引用类型,规则比较简单。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
let num=new Number("5");
let str=new String("ant");
let bl=new Boolean(true);

利用各自构造函数,将值类型数据转换为对应的引用类型数据即可。

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let str="antzone";
let num=8;
console.log(str.length);
console.log(num.toFixed());

通常来讲只有引用类型数据才会有属性和方法,那为什么值类型字符串和数字都可以使用属性和方法。

这是因为在引用属性或调用方法之前,内部首先会将值类型暂时包装为引用类型,这也算是一种转换方式吧。

三.引用类型转换为值类型:

1.转为布尔值:

任何引用类型对象转换为布尔值都是true,没有例外。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let b=new Boolean(false); 
if(obj){console.log("蚂蚁部落");}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145754ek69jlbjc79cy6ik.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

即便构造函数的参数为false,只要是引用类型数据,转为布尔值一定为true。

2.转换为字符串或者数字:

利用toString()和valueOf(),可以将值类型数据转换为字符串或者数字。

(1).toString():

此方法可以将值类型数据转换为它的字符串形式。

String、Array、Date等对象的toString方法都继承自Object对象。

并且根据需要都进行重写,所以每一个对象调用toString方法返回的结果不同。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
// 返回对应的字符串"蚂蚁部落"
console.log((new String("蚂蚁部落")).toString());
// 将数组中元素用逗号连接成字符串
console.log(["蚂蚁部落","成立","4","周年"].toString());
// 返回函数的声明字符串
console.log((function(a,b){return a+b}).toString())
// 返回时间日期对象的字符串形式
console.log((new Date()).toString())
// 返回正则表达式直接量
console.log((new RegExp("\\d")).toString())

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145830ydd2yfmfzmpowp6z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

不同类型对象对toString方法进行了不同的重写,从而可以返回各自对象的字符串表示方式。

(2).valueOf():

此方法的目的是返回一个表示引用类型数据值类型数据的值。

引用类型是一个复杂的结构,不同类型对象调用此方法,返回值也不同。

一定有一个意识,它的返回值并不一定是数值类型。

返回值规则大致如下:

(1).函数、数组和正则表达式返回对象本身。

(2).Date对象则返回一个时间戳。

(3).布尔型和Number对象则返回对应的布尔值。

代码实例如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145846zrplrqjzkrfb3xsp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

3.转换为数字和字符串:

很多朋友会认为,将数据转换为字符串或者数字的规则如下:

(1).首先尝试调用toString方法。

(2).如果toString方法不存在,再去尝试调用valueOf方法。

上面这种观点完全是错误的,出去Date对象外,无论转换成数字还是字符串,都是首先尝试调用valueOf方法。

Date对象则比较灵活,会根据上下文判断调用哪个方法,后面会有代码演示。

[JavaScript] 纯文本查看 复制代码运行代码
Object.prototype.toString=function(){ 
  console.log("tostring"); 
  return "蚂蚁部落"; 
} 
Object.prototype.valueOf=function(){ 
  console.log("valueOf"); 
  return "88"; 
} 
var obj=new Object(); 
console.log(obj+"");

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145920azx3nxwxnwspxkdk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面演示的是将obj隐式转换为字符串,可以看到,会首先尝试调用valueOf方法。

对于转换为数字也是同样的道理,不做演示,下面再看Date对象的。

Date对象非常的灵活,会根据上下文的不同自行决定调用哪个方法,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
Date.prototype.toString=function(){ 
  console.log("tostring"); 
  return "蚂蚁部落"; 
} 
Date.prototype.valueOf=function(){ 
  console.log("valueOf"); 
  return "88"; 
} 
let d=new Date(); 
console.log(+d);
console.log(d+"");

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/145950tm6jrylq4jiaiqz9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在数值上下文环境则调用valueOf方法,字符串环境则调用toString方法。

四.隐式数据类型转换:

考虑到文章的篇幅问题,本文不再介绍隐式数据类型转换的相关知识。

具体参阅JavaScript 隐式数据类型转换一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部