JavaScript 数据类型转换

红太狼 2020-05-27 14:19 1069阅读 0赞

# JavaScript 数据类型转换

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

（1）.显式数据类型转换，指定由某种类型转换到另一种类型。

（2）.隐式数据类型转换，代码根据上下文自动判断类型转换。

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

（1）.值类型之间数据转换。

（2）.值类型转换到引用类型。

（3）.引用类型转换到值类型。

首先看一段代码实例：

```javascript
console.log("15"==15);
```

代码运行效果截图如下：

![](/images/1590589145512.png)

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

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

**一.值类型之间数据转换：**

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

（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 truetrue |

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

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

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

```javascript
let numStr="88ant";
console.log(+numStr);
console.log(parseInt(numStr));
```

代码运行效果截图如下：

![](/images/1590589127342.png)

转换结果完全不同，代码分析如下：

（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("蒲公英云");}
```

即便构造函数的参数为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())
```

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

（2）.valueOf()：

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

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

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

返回值规则大致如下：

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

（2）.Date对象则返回一个时间戳。

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

**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+"");
```

上面演示的是将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+"");
```

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

**四.隐式数据类型转换：**

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