JavaScript – 类型转换

介绍

JS 是弱类型语言, 在编程时, 有许多自动类型转换的技巧, 虽然大家都不太鼓励, 尤其是用了 TypeScript 之后,

但无可否认自动转换很方便, 看上去也很干净. 所以这篇还是要介绍一些常见的类型转换语法.

题外话: C# 是强类型, 为什么可以 "abc" + 5, 但不可以 "1" - "2". 因为 + 会被 compile 成 String.Concat(...) 参考: stackoverflow – string = string + int: What's behind the scenes?

参考

阮一峰 – 数据类型转换

Convert to boolean

除了下面五种值会被强转成 false, 其余值都是 true

Boolean(0);         // zero
Boolean(NaN);       // not a number
Boolean('');        // empty string
Boolean(undefined); // undefined
Boolean(null);      // null

Auto convert to boolean

const obj = {};
if(obj) {
    console.log('dada');
}

这种 if (value) 但 value 又不是 boolean 的情况是最常见的.

JS 会先把 value 强转成 boolean, 然后进入 if 判断,

Convert to number

for 原始类型

Number(123); // 123
Number('123'); // 123
Number(''); // 0
Number(true); // 1
Number(false); // 0

Number('123abc'); // NaN (因为有 abc)
Number(undefined); // NaN

Number(null); // 0

前面 5 个可以理解, '123abc' 和 undefined 也可以接受, 最奇葩是 null 为什么是 0...背起来呗

for 对象会更乱水

const obj = {
    toString() {},
    valueOf() { }
}

if(typeof obj.valueOf() === 'object') {
    Number(obj.toString());
}
else {
    Number(obj.valueOf());
}

它会拿对象的 valueOf 或 toString 的返回值来做强转. 顺序看上面 if else 的逻辑就明白了.

Auto convert to number

const value = 100 * null; // 0 (因为 null 被强转成 0, 所以 100 * 0 = 0)
console.log(value);
const value2 = 100 + undefined;
console.log(value2); // NaN (因为 undefined 强转时 NaN, 所以 100 + NaN = NaN)

当出现运算操作符时, JS 就会尝试强转成 number 了.

不过当 + 遇上 string 的时候例外哦, 会优先 auto convert to string

const value = '1' + 2;
console.log(value); // string: '12'

const value2 = '2' - '1';
console.log(value2); // number: 1' 因为不是 + string

>, >=, <, <=

当 compare (>, >=, <, <=) 2 个不同类型的值时, JS 也是会强转 value 到 Number

忠告

由于 Number 强转非常混乱, 所以不推荐使用, 唯一可以用的是通过 + 符号把 string 转换成 nunber

const value = +'500'; // 500, ok 用但要确保 string 是纯数字哦
const value1 = +'500px' // NaN
const value2 = Number.parseFloat('500px') // 500 如果担心 string 不干净, 建议使用 parseInt or parseFloat

Convert to string

for 原始类型

String(123.50) // "123.5"
String(true) // "true"
String(false) // "false"
String(undefined) // "undefined"
String(null) // "null"

for 对象

和 Number 类似, 只是顺序换了, 它优先看 toString, 不行才用 valueOf

if(typeof obj.toString() === 'object') {
    String(obj.valueOf());
}
else {
    String(obj.toString());
}

Auto convert to string

const whateverType = 100;
const value = 'string value' + whateverType; // string value100

当一个 string + (加) 任何类型的值, 这个值都会被强转成 string.

最常用的地方就是 number + 'px', 不知不觉就用到了.