js的数据类型转换

强制转换

所谓强制转换就是使用Number()、String()、Boolean等方法进行强制转换

console.log(Number('886'));     // 886
console.log(Number('ui886'));       // NaN
console.log(String(123456));        // '123456'
console.log(String(false));     // 'false'
console.log(Boolean(1));        // true
console.log(Boolean('false'));      // true

引用数据类型的转换过程

这三种方法都有各自的转换过程

• Number()
  在对于引用数据类型时，会进行两部操作
  先进行valueOf()方法，若还无法直接转换，则再执行toString()方法，此时若还无法得到可以转换为数值的值则返回NaN
  如下：

const a = {
    m: 'abc'
};
console.log(Number(a)); // NaN

让我们改写这两个方法

const a = {
    m: 'abc',
    valueOf() {
        return 3;
    },
    toString() {
        return 5;
    }
};
console.log(Number(a)); // 3

可以看到再执行valueOf方法时已得到了需要的number数据类型的值，所以直接返回了，会跳过toString的执行

const a = {
    m: 'abc',
    toString() {
        return 5;
    }
};
console.log(Number(a)); // 5

当valueOf方法也无法得到数值类型数据，才会执行toString方法

• String()
  与Number()类似，但是转换引用数据类型是先执行toString方法再执行valueOf方法，最后还是引用数据类型就会返回'[object Object]'
  如下：

const a = {
    m: {}
};
console.log(String(a)); // '[object Object]'

以下代码可以看出，先执行的是toString方法

const a = {
    m: {},
    valueOf() {
        return 'ww';
    },
    toString() {
        return 'aa';
    }
};
console.log(String(a));  // 'aa'

• Boolean()
  它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

  • undefined
  • null
  • 0（包含-0和+0）
  • NaN
  • ''（空字符串）

自动转换

js本身是弱类型的语言，赋值时可以是任意数据类型，所以经常会出现不同数据类型的数据进行运算的情况

自动转字符串

console.log('123' + 123);       // '123123'
console.log('123' + true);      // '123true'

使用加号运算时，存在字符串时会变成字符串拼接，其他类型的数据就会自动转为字符串数据类型，而如果其他的数据类型为引用数据类型是，就会强制转换，即使用String()

console.log('123' + {});  // '123[object Object]'
console.log('123' + []);  // '123'
console.log('123' + [1, 2, 3]);  // '1231,2,3'

数组与对象不同，当数值只有一个值或空数组时，强制转换会变为那个值的字符串或空字符串，若有多个值时，逗号也会加入转换

自动转数值

除了加法运算符，其他运算符基本都会把其他数据自动转换为数值类型

console.log('123' - '12');  // 111
console.log(true * '12');   // 12
console.log('45' / 5);  // 9
console.log('2' ** 2);  // 4

注意： null转为数值时为0，而undefined转为数值时为NaN。

NaN与任何数值运算都为NaN

遇到转换不了的结果就会是NaN

console.log('abc123' - '12');  // NaN
console.log(+'aaa');   // NaN
console.log(-null);  // -0

自动转布尔值

JavaScript 遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean()函数。

因此除了以下五个值，其他都是自动转为true。

• undefined
• null
• +0或-0
• NaN
• ''（空字符串）

总结

js的数据类型转换分为两种，强制转换与自动转换

• 自动转换

  • 当不同数据类型之间进行相互运算，或者当对非布尔类型的数据求布尔值的时候，会发生隐性转换。
  • 预期为数字的时候：算术运算的时候，我们的结果和运算的数都是数字，数据会转换为数字来进行计算。
  • 预期为字符串的时候：如果有一个操作数为字符串时，使用+符号做相加运算时，会自动转换为字符串。
  • 预期为布尔的时候：前面在介绍布尔类型时所提到的 9 个值会转为 false，其余转为 true

• 强制转换

  • 强制将一种类型转换为另外一种类型。强制转换往往会使用到一些转换方法。常见的转换方法如下：

  • 转换为数值类型：Number()，parseInt()，parseFloat()

  • 转换为布尔类型：Boolean()

  • 转换为字符串类型：toString()，String()

  当然，除了使用上面的转换方法，我们也可以通过一些快捷方式来进行数据类型的强制转换，如下：

  • 转换字符串：直接和一个空字符串拼接，例如：a = "" + 数据

  • 转换布尔：!!数据类型，例如：!!"Hello"

  • 转换数值：数据*1 或 /1，例如："Hello * 1"