JS显性数据类型转换和隐性数据类型转换

朴灿烈づ我的快乐病毒、 2022-07-15 09:52 310阅读 0赞

# 一、JS需要类型转换的原因 #

JS是一种弱类型语言，变量没有类型限制，可以随意赋值。如：

var a=5;
    console.log(typeof a);//number
    a='我是字符串';
    console.log(typeof a);//string

如上所示，当把数字5赋值给a变量时，a变量的类型是number，当把字符串“我是字符串”赋值给变量a时，a变量的类型是string。

虽然变量没有类型限制，但运算符要求进行运算的变量的类型和运算符期望的类型一致，所以，当不同类型的变量进行加减运算时，就会进行类型转换（如，1+'a'、'3'-'1'）。类型转换主要分为两种：**强制(显性)类型转换和自动(隐性)类型转换**。每种转换又可分为原始类型转换和对象类型转换，原始类型主要包括数字、字符串、布尔值、null、undefined等。

![Center][]

![Center 1][]

# 二、强制(显性)类型转换 #

强制类型转换主要是指通过String、Number和Boolean等构造方法手动转换成对应的字符串、数字和布尔值。

## 2.1、将其他类型转为字符串 ##

字符串是JS的基本数据类型之一，使用String对象的构造方法可以将任意类型的数据转换为字符串，其中，这里的任意类型主要分为两大类：原始(基本)类型和对象类型。基本类型的转换相对简单，转换方法如下：

<table> 
 <tbody> 
  <tr> 
   <th>基本数据类型</th> 
   <th>String类型</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td style="text-align:center">数字</td> 
   <td style="text-align:center">对应的数字字符串</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">true</td> 
   <td style="text-align:center">字符串true</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">false</td> 
   <td style="text-align:center">字符串false</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">null</td> 
   <td style="text-align:center">字符串null</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">undefined</td> 
   <td style="text-align:center">字符串undefined</td> 
  </tr> 
 </tbody> 
</table>

如下，均输出对应的字符串值：

console.log(String(123));//"123"
    console.log(String(true));//"true"
    console.log(String(false));//"false"
    console.log(String(null));//"null"
    console.log(String(undefined));//"undefined"

对象类型的转换稍微复杂些，对象参与基本类型数据运算时，首先是要将对象转换为基本类型。转换方法如下：

1、调用toString()方法，如果返回基本类型的值，则用String()构造方法转换该值。

2、如果toString()方法返回的不是基本类型，则再调用valueOf()方法，如果返回基本类型的值，则用String()构造方法转换该值。

3、如果valueOf()方法返回的也不是基本类型，就抛出错误，如谷歌抛出：Uncaught TypeError: Cannot convert object to primitive value

如下，为了方便查看，重写了String的toString()和valueOf()方法：

例1、当String对象的toString()方法返回基本类型时

//重写Date对象的toString()
    Date.prototype.toString=function(){
     console.log('执行了toString(),这里返回数字1');
     return 1;
    };
    //重写Date对象的valueOf()方法
    Date.prototype.valueOf=function(){
     console.log('执行了valueOf()方法，这里返回数字2');
     return 2;
    };
    var date=new Date();
    var str=String(date);

输出结果：

执行了toString(),这里返回数字1

列2、当toString()方法返回非基本类型时，再次调用valueOf()方法

//重写Date对象的toString()
    Date.prototype.toString=function(){
     console.log('执行了toString(),这里返回数字1');
     return {};
    };
    //重写Date对象的valueOf()方法
    Date.prototype.valueOf=function(){
     console.log('执行了valueOf()方法，这里返回数字2');
     return 2;
    };
    var date=new Date();
    var str=String(date);//先调用toString()方法，由于返回的不是基本数据类型，再次调用valueOf()方法

输出结果：

执行了toString(),这里返回数字1
    执行了valueOf()方法，这里返回数字2

例3、toString()和valueOf()都返回的不是基本数据类型，则抛出异常

//重写Date对象的toString()
    Date.prototype.toString=function(){
     console.log('执行了toString(),这里返回数字1');
     return {};
    };
    //重写Date对象的valueOf()方法
    Date.prototype.valueOf=function(){
     console.log('执行了valueOf()方法，这里返回数字2');
     return {};
    };
    var date=new Date();
    var str=String(date);//先调用toString()方法，由于返回的不是基本数据类型，再次调用valueOf()方法，但还是返回非基本数据类型，所以抛出异常

输出结果：

执行了toString(),这里返回数字1
    执行了valueOf()方法，这里返回数字2
    Uncaught TypeError: Cannot convert object to primitive value

也可以采用如下方式验证：

## 2.2、将其他类型转换成数字 ##

使用Number构造函数转化任意类型的值时，也分为两种：一种是将基本类型的值转换成数字，一种是将对象型的值转换为数字。基本类型的数据转换数字的规则如下：

<table> 
 <tbody> 
  <tr> 
   <th>基本数据类型</th> 
   <th>数字类型</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td style="text-align:center">数字字符串</td> 
   <td style="text-align:center">对应的数字</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">true</td> 
   <td style="text-align:center">1</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">false</td> 
   <td style="text-align:center">0</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">null</td> 
   <td style="text-align:center">0</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">undefined</td> 
   <td style="text-align:center">NaN</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">空字符串</td> 
   <td style="text-align:center">0</td> 
  </tr> 
  <tr> 
   <td style="text-align:center">不可完全被解析为数值的字符串</td> 
   <td style="text-align:center">NaN</td> 
  </tr> 
 </tbody> 
</table>

如下：

console.log(Number(123));//123
    console.log(Number('123'));//123
    console.log(Number('123a'));//NaN
    console.log(Number(''));//0
    console.log(Number(true));//1
    console.log(Number(false));//0
    console.log(Number(undefined));//NaN
    console.log(Number(null));//0
    console.log(Number(' \t\n 3.23322\t '));//Number可以自动去掉两头空白符，输出3.23322

注：Number构造函数将字符串转换为数字时，字符串必须完全被为数字，即只要有一个字符无法转为数值，则整个字符串都会被转为NaN。如果想不精确转换，可以使用parseInt()函数，parseInt()函数将最大限度的将字符串转换为数字。如：

console.log(parseInt('123abc456'));//123
    console.log(Number('123abc456'));//NaN

对象类型转换为数字，和上面对象转换为字符串类似，只是转为数字时是先调用valueOf()方法，再调用tostring()方法：

1、首先调用对象自身的valueOf()方法，如果返回基本类型的值，则用Number构造函数进行转换。

2、如果valueOf()返回的不是基本类型的值，则再调用toString()方法，如果返回基本类型的值，值用Number构造函数进行转换。

3、如果toString()返回的不是基本类型的值，则抛出异常。

验证方法与上面转为字符串的类似，如：

输出结果：

执行了valueOf()方法，这里返回数字2

## 2.3、将其他类型转换为布尔值 ##

使用Boolean构造函数转换其他类型的数值时，除了下面几种情况返回false外，其他的值都返回true。

1、null

2、0、-0或者+0

3、NaN

4、''  空字符串

5、undefined

如：

console.log(Boolean(null));//false
    console.log(Boolean(0));//false
    console.log(Boolean(-0));//false
    console.log(Boolean(+0));//false
    console.log(Boolean(''));//false
    console.log(Boolean(NaN));//false
    console.log(Boolean(undefined));//false
    console.log(Boolean({}));//true
    console.log(Boolean([]));//true
    console.log(Boolean("蝈蝈"));//true
    console.log(Boolean(new Boolean(false)));//true

# 三、自动(隐性)类型转换 #

自动类型转换就是不需要人为强制的进行转换，js会自动将类型转换为需要的类型，所以该转换操作用户是感觉不到的，因此又称为隐性类型转换。自动类型转换实际上和强制类型转换一样，也是通过String()、Number()、Boolean()等构造函数进行转换，只是该操作是JS自己自动完成的而已。自动类型转换的规则和强制类型转换的规则一致，所以这里不再进行描述。下面列举几个例子：

## 3.1、转换为数字 ##

在所有加减乘除等需要数字类型的地方，JS会自动使用Number构造函数对变量进行转换。

console.log('1'-'2');//-1
    console.log(1+'2');//12 加号+比较特殊，其他类型和字符串相加都会转换成字符串
    console.log('1'-true);//0
    console.log('1'*{});//NaN
    console.log('1'-'a');//NaN

## 3.2、转换为字符串 ##

字符串自动转换主要表现为字符串的拼接，字符串和其他类型用加号(+)拼接时，其他类型都自动转换为字符串。

console.log('1'+'2');//12
    console.log('1'+'a');//1a
    console.log('1'+1);//11
    console.log('a'+null);//anull
    console.log('1'+undefined);//1undefined
    console.log('a'+{});//a[object Object]
    console.log('a'+true);//atrue

## 3.3、转换为布尔值 ##

当在任意需要布尔类型的地方(如，if条件出、三元运算符条件等)，系统都会自动调用Boolean()构造函数将值转换为Boolean类型。null、0、-0、+0、'' 空字符串、undefined、NaN这些都会转换为false，其他的值都会转换为true。

[Center]: /images/20220715/7d44f8e580884c95add025b1aebdc171.png
[Center 1]: /images/20220715/461f8c7012ee4e14a25f71b8643add5a.png