类型转换（上篇）

超、凢脫俗 2023-01-11 01:13 117阅读 0赞

**目录**

原始值转对象

对象转字符串/数字

toString()和String()的区别

不同情况下的toString()

toString() 和 valueOf()的区别

对象转字符串

对象转数字

toPrimitive()

--------------------

几个api

var a = [1,2,3];
    var b ={v:1};
    var c = () => {}
    console.log(a.toString())   // ‘1,2,3’
    console.log(b.toString)      // "[object Object]"
    console.log(c.toString)        //  "()=>{}"

*  parsetInt，将结果转换为整数  （进制转换）
 *  parseFloat，将结果转换为整数或者浮点数

var a = 2 ; a.toFixed(2)  // 2.00  取小数点后几位

Math.floor(2.55)  // 2   向下取整

Math.ceil(2.11)    // 3   向上取整

## **原始值转对象** ##

原始值转对象主要有以下总结：

*  String、Number、Boolean有两种用法，配合new使用和不配合new使用，但是ES6规范不建议使用new来创建基本类型的包装类。
 *  现在更加推荐用new Object()来创建或转换为一个基本类型的包装类。

**基本类型的包装对象的特点：**

*  使用typeof检测它，结果是object，说明它是一个对象
 *  使用toString()调用的时候返回的是原始值的字符串

var a = new String(1)

var b = new Object(1)   //如果要转换为基本包装类型  建议这么用

typeof(a)   typeof(b)  //object

## **对象转字符串/数字** ##

**涉及： toString()  valueOf() ** toPrimitive()

### toString()和String()的区别 ###

toString它是除了null、undefined之外的数据类型都有的方法，通常情况下它的返回结果和String一样。

### 不同情况下的toString() ###

1.  对于基本数据类型来调用它，超级简单的，你就想着就是把它的原始值换成了字符串而已。
2.  Array和Function和Date都重写了toString()方法
3.  原始值包装对象调用toString()

原始值包装对象也就是：

Number\{1\}

String\{'1'\}

Boolean\{true\}

当它们在调用toString()方法的时候，会返回它们原始值的字符串，就像这样：

console.log(new Object(true).toString()) // "true"

console.log(new Object(1).toString()) // "1"

console.log(new Object('1').toString()) // "1"

### toString() 和 valueOf()的区别 ###

*  toString主要是把对象转换为字符串
 *  valueOf主要把对象转换成一个基本数据的值

不同情况下的valueOf()

1.  基本数据类型的调用也是很简单的，它只要返回调用者原本的值就可以了
2.  引用类型调用valueOf()并不难，你只需要记住：

*  非日期对象的其它引用类型调用valueOf()默认是返回它本身。即对于非日期对象：执行完valueOf()若返回的不是基本数据类型，就去执行toString()
 *  而日期对象会返回一个1970 年 1 月 1 日以来的毫秒数。

## **对象转字符串** ##

对于**对象转字符串**，也就是调用String()函数，总结如下：

*  如果对象具有 toString 方法，则调用这个方法。如果他返回一个原始值，JavaScript 将这个值转换为字符串，并返回这个字符串结果。
 *  如果对象没有 toString 方法，或者这个方法并不返回一个原始值，那么 JavaScript 会调用 valueOf 方法。如果存在这个方法，则 JavaScript 调用它。如果返回值是原始值，JavaScript 将这个值转换为字符串，并返回这个字符串的结果。()
 *  否则，JavaScript 无法从 toString 或者 valueOf 获得一个原始值，这时它将抛出一个类型错误异常。

## **对象转数字** ##

所以对于对象转数字，总结来说和对象转字符串差不多：

*  如果对象具有 valueOf 方法，且返回一个原始值，则 JavaScript 将这个原始值转换为数字并返回这个数字
 *  否则，如果对象具有 toString 方法，且返回一个原始值，则 JavaScript 将其转换并返回。
 *  否则，JavaScript 抛出一个类型错误异常。

## **toPrimitive()** ##

对象转字符串和数字的过程比较复杂：**toPrimitive()**。它的作用其实就是输入一个值，然后返回一个**一定是基本类型的值**，否则会抛出一个类型错误异常。

testTypeChange() { //类型转换
            var a = {
              toString() {
                console.log('toString')
                return 233
              },
              valueOf () {
                console.log('valueOf')
                return [1, 2]
              },
            }
            console.log(Number(a))
        },

输出：

'valueof'  
'toString'  
233

--------------------

testTypeChange() { //类型转换
            var a = {
              toString() {
                console.log('toString')
                return 233
              },
              valueOf () {
                console.log('valueOf')
                return 999
              },
            }
            console.log(Number(a))
        },

输出：

'valueof'

999

--------------------

testTypeChange() { //类型转换
            var a = {
              toString() {
                console.log('toString')
                return [11,22]
              },
              valueOf () {
                console.log('valueOf')
                return [141,422]
              },
            }
            console.log(Number(a))
        },

输出：

会报错，因为走到toString()这一步，没有return基本数据类型

--------------------

## 规则  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

> 根据流程图，我们得出了这么几个信息：
> 
> 1.  当不传入 PreferredType 时，如果 input 是日期类型，相当于传入 String，否则，都相当于传入 Number。
> 2.  如果是 ToPrimitive(obj, Number)，处理步骤如下：
> 
>  *  如果 obj 为 基本类型，直接返回
>  *  否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
>  *  否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
>  *  否则，JavaScript 抛出一个类型错误异常。
> 
> 1.  如果是 ToPrimitive(obj, String)，处理步骤如下：
> 
>  *  如果 obj为 基本类型，直接返回
>  *  否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
>  *  否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
>  *  否则，JavaScript 抛出一个类型错误异常。

例子：

对于`Number({})`：

*  传入的是一个对象`{}`，因此调用`valueOf()`方法，它除了日期对象的其它引用类型调用都是返回它本身，所以这里还是返回了对象`{}`
 *  `valueOf()`返回的值还是对象，所以继续调用`toString()`方法，而`{}`调用`toString()`的结果为字符串`"[object Object]"`，是一个基本数据类型
 *  得到基础数据类型了，该要返回了，不过在这之前还得将它在转换为数字才返回，那么`"[object Object]"`转为数字为`NaN`，所以结果为`NaN`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221119/9100562873a243379051810a12096507.png