Web前端入门第 57 问：JavaScript 数据类型与类型转换

在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。

如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。

在 JS 中，数据类型可以分为 原始类型 和 对象类型。

原始类型

直接存储值，不可变（值的地址不可变），共 7 种：

1、number 数值类型，包括整数、浮点数、Infinity、NaN。

const num1 = 123;

const num2 = 123.456;

const num3 = Infinity;

const num4 = NaN;

const num5 = new Number(456); // 使用构造函数声明，获得一个 Number 对象

console.log(typeof num5); // object

const num6 = Number(456); // 函数式声明 Number 类型

console.log(typeof num6); // number

2、string 字符串类型。单双引号声明的字符串不允许换行，可使用反引号申明多行字符串和模版字符串。

const str1 = 'hello'; // JS 中声明字符串允许单引号和双引号

const str1_1 = '\'hello\''; // 单引号中还有单引号需要使用反斜线转义字符串

const str2 = " world";

const str3 = str1 + str2; // 字符串拼接，获得 hello world

const str4 = `前端路引

${str1}${str2}`; // 多行模版字符串声明，允许有换行和变量存在， ${str1}${str2} 表示拼接两个变量

const str5 = new String('前端路引');

console.log(typeof str5); // object

const str6 = String('前端路引');

console.log(typeof str6); // number

3、boolean 布尔值（true/false）。

const bool1 = true;

const bool2 = false;

const bool3 = new Boolean(true);

console.log(typeof bool3); // object

const bool4 = Boolean(true);

console.log(typeof bool4); // boolean

4、null 表示空值。

const empty = null;

console.log(typeof empty); // object

5、undefined 未定义的值。

let u1; // 未声明变量，默认为 undefined

const u2 = undefined; // 显示使用 undefined 声明变量

6、symbol 唯一且不可变的值（符号）。就算使用 Symbol 声明的内容一样，但是两个变量其实是不相等的！！

const sym1 = Symbol('前端路引'); // 带描述的符号

const sym2 = Symbol('前端路引');

console.log(sym1 === sym2); // false

const sym3 = Symbol.for('前端路引'); // 全局符号

const sym4 = Symbol.for('前端路引');

console.log(sym3 === sym4); // true

console.log(Symbol.keyFor(sym3)); // 前端路引

const sym5 = Symbol(); // 不带描述的符号

7、bigint 大整数（以 n 结尾，如 123n），一般用于表示大于 2^53 - 1 的整数，ES2020+ 引入的新的数据类型，使用时需注意兼容性。

const big1 = 123n;

const big2 = BigInt(123);

console.log(big1 === big2); // true

console.log(typeof big1); // bigint

console.log(big1 === 123) // false

console.log(big1 === 123n); // true

对象类型

存储引用（内存地址），可变，包含所有非原始类型的值：

1、普通对象

const obj1 = {}; // 创建一个空对象

const obj2 = { name: '前端路引', age: 1 }; // 带属性的对象

const obj3 = new Object(); // 使用构造函数创建对象

const obj4 = Object({name: '前端路引'});

2、数组

const arr1 = []; // 空数组

const arr2 = [1, 2, 3]; // 带元素的数组

const arr3 = new Array();

const arr4 = Array(10).fill('前端路引'); // 创建一个长度为 10 的数组，并填充内容

3、函数

function func1() {

  console.log('Function 1');

}

const func2 = function() {

  console.log('Function 2');

};

const func3 = () => {

  console.log('Function 3');

};

除了基础的三种基础对象类型外，JS 还内置了很多其他对象，比如 Date、RegExp、Error、Map、Set、WeakMap、WeakSet、Promise、Proxy、ArrayBuffer 等。

类型转换

JS 的类型转换分为隐式转换（明确表明由 A 转为 B）和显式转换（自动发生的类型转换）。

显式转换

通过对象方法强制转换：

1、转字符串

String(123);      // "123"

[1,2].toString(); // "1,2"

2、转数字

Number("123");   // 123

Number("abc");   // NaN

parseInt("12px");// 12

3、转布尔

Boolean("");     // false

Boolean({});     // true

隐式转换

一半多发生于运算符，比如：

1、字符串拼接

console.log('1' + 1); // 11

console.log(1 + '1'); // 11

2、数学运算

console.log('1' - 1); // 0

console.log(1 - '1'); // 0

console.log('1' * 1); // 1

console.log(1 * '1'); // 1

console.log('1' / 1); // 1

console.log(1 / '1'); // 1

3、逻辑运算

if (0) { // 0 为 false，将不会执行代码块

  console.log('0');

}

常见转换规则

原始值	转字符串	转数字	转布尔值
`true`	"true"	1	true
`false`	"false"	0	false
`0`	"0"	0	false
`""`	""	0	false
`"123"`	"123"	123	true
`null`	"null"	0	false
`undefined`	"undefined"	NaN	false
`NaN`	"NaN"	NaN	false
`[]`	""	0	true
`[5]`	"5"	5	true
`{}`	"[object Object]"	NaN	true

常见陷阱与最佳实践

1、== vs ===

== 会进行类型转换： 0 == false 为 true。
=== 严格比较类型和值，推荐使用。

2、NaN的判断

NaN === NaN 为 false，使用 Number.isNaN(value) 或 Object.is(value, NaN)。

3、对象转换

对象转原始值时，优先调用 valueOf()，再 toString()。
{} + [] 可能被解析为代码块，导致结果意外。

4、parseInt基数

总是指定基数：parseInt("08", 10) 避免八进制误解。

写在最后

由于 JavaScript 属于弱类型语言，所以在编码时候特别需要注意类型转换问题。特常见问题：后端返回的数据类型是字符串 '1'，在前端当做数字 1 使用，这时候分分钟踩雷。