JavaScript 中数据类型的判断与转换

前端尾巴
1,092 阅读7分钟

一、数据类型

各种数据类型的详细说明参考：togoblog.cn/javascript-…

二、类型判断

1、typeof

typeof 是一元操作符，放在其单个操作数的前面，操作数可以是任意类型。返回值为表示操作数类型的一个字符串。

let a;
const s = Symbol('foo');

console.log(typeof a); // undefined
console.log(typeof null); // object
console.log(typeof 'String'); // string
console.log(typeof 1); // number
console.log(typeof BigInt('9007199254740993')); // bigint
console.log(typeof false); // boolean
console.log(typeof s); // symbol
console.log(typeof {}); // object

注意以上都是小写的字符串。

typeof 也能检测出函数类型：

function func() { }
console.log(typeof func); // function

所以，typeof 一共能检测出 8 种类型的值。

但是，Object 下还有很多细分的类型，如 Array、Function、Date、RegExp、Error 等，如果用 typeof 去检测这些类型，返回的都是 object：

const date = new Date();
const error = new Error();
console.log(typeof date); // object
console.log(typeof error); // object

那该如何检测呢？

2、Object.prototype.toString

Object.prototype.toString：es5.github.io/#x15.2.4.2

我们试试这个方法：

console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]

const date = new Date();
console.log(Object.prototype.toString.call(date)); // [object Date]

该方法最后返回的是由 [object 和 class 和 ] 三个部分组成的字符串，其中 class 是要判断的对象的内部属性。所以，我们可以用 Object.prototype.toString 方法识别出更多类型。

let a;
const s = Symbol('foo');
const date = new Date();
const array = [1, 2, 3];
const reg = /a/g;
const error = new Error();
const func = function a() { };

console.log(Object.prototype.toString.call(a)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call('String')); // [object String]
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(BigInt('9007199254740993'))); // [object BigInt]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call(s)); // [object Symbol]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(date)); // [object Date]
console.log(Object.prototype.toString.call(array)); // [object Array]
console.log(Object.prototype.toString.call(reg)); // [object RegExp]
console.log(Object.prototype.toString.call(error)); // [object Error]
console.log(Object.prototype.toString.call(func)); // [object Function]

甚至可以检测更多：

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]
function main() {
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}
main();

因为最终返回的字符串不是那么地简洁，我们可以封装一下：

const detectType = (obj) => {
  const classType = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regexp',
    '[object Object]': 'object',
    '[object Error]': 'error',
    '[object Null]': 'null',
    '[object Undefined]': 'undefined',
    '[object BigInt]': 'bigint',
    '[object Symbol]': 'symbol',
  };
  return ((typeof obj === 'object' || typeof obj === 'function')
    ? (classType[Object.prototype.toString.call(obj)] || 'object')
    : typeof obj);
};

三、类型转换

1、强制转换

强制转换主要指使用 Number、String 和 Boolean 三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。

1.1 Number()

使用 Number 函数，可以将任意类型的值转化成数值。

下面分成两种情况讨论，一种是参数是原始类型的值，另一种是参数是对象。

（1）原始类型值

// 数值：转换后还是原来的值
Number(324); // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324'); // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc'); // NaN

// 空字符串转为0
Number(''); // 0

// 布尔值：true 转成 1，false 转成 0
Number(true); // 1
Number(false); // 0

// undefined：转成 NaN
Number(undefined); // NaN

// null：转成0
Number(null); // 0

// Symbol：不能转换，会直接报错
Number(Symbol('foo')); // TypeError: Cannot convert a Symbol value to a number

Number 函数将字符串转为数值，要比 parseInt 函数严格 —— 只要有一个字符无法转成数值，整个字符串就会被转为 NaN。

parseInt('42 cats'); // 42
Number('42 cats'); // NaN

parseInt 和 Number 函数也有共同点：都会自动过滤一个字符串前导和后缀的空格。

parseInt('\t\v\r12.34\n'); // 12
Number('\t\v\r12.34\n'); // 12.34

（2）对象

规则是，Number 方法的参数是对象时，将返回 NaN，除非是包含单个数值的数组。

Number({ a: 1 }); // NaN
Number([1, 2, 3]); // NaN
Number([5]); // 5

转换时的规则是这样执行的：

第一步，调用对象自身的 valueOf 方法。如果返回原始类型的值，则直接对该值使用 Number 函数，不再进行后续步骤。

第二步，如果 valueOf 方法返回的还是对象，则改为调用对象自身的 toString 方法。如果toString方法返回原始类型的值，则对该值使用 Number 函数，不再进行后续步骤。

第三步，如果 toString 方法返回的是对象，就报错。

1.2 String()

String 函数可以将任意类型的值转化成字符串，转换规则如下：

（1）原始类型值

  • 数值：转为相应的字符串。
  • 字符串：转换后还是原来的值。
  • 布尔值：true 转为字符串 "true"，false 转为字符串 "false"。
  • undefined：转为字符串 "undefined"。
  • null：转为字符串 "null"。

（2）对象

如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。

String({ a: 1 }); // "[object Object]"
String([1, 2, 3]); // "1,2,3"

String 方法背后的转换规则，与 Number 方法基本相同，只是互换了 valueOf 方法和 toString 方法的执行顺序：

  1. 先调用对象自身的 toString 方法。如果返回原始类型的值，则对该值使用 String 函数，不再进行以下步骤。
  2. 如果 toString 方法返回的是对象，再调用原对象的 valueOf 方法。如果 valueOf 方法返回原始类型的值，则对该值使用 String 函数，不再进行以下步骤。
  3. 如果 valueOf 方法返回的是对象，就报错。
1.3 Boolean()

Boolean 函数可以将任意类型的值转为布尔值。除了以下六个值的转换结果为 false，其他的值全部为 true。

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

注意，所有对象（包括空对象）的转换结果都是 true，甚至连 false 对应的布尔对象 new Boolean(false) 也是 true：

Boolean({}); // true
Boolean([]); // true
console.log(Boolean(new Boolean(false))); // true

2、自动转换

有三种情况会发生自动类型转换：

  • 不同类型的数据互相运算

  • 对非布尔值类型的数据求布尔值

  • 对非数值类型的值使用一元运算符（即 + 和 -）

自动转换的规则是：预期什么类型的值，就调用该类型的转换函数。比如，某个位置预期为字符串，就调用 String 函数进行转换。如果该位置既可能是字符串，也可能是数值，那么默认转为数值。

由于自动转换具有不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用 Boolean、Number 和 String 函数进行显式转换。

2.1 自动转换为布尔值

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

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

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

下面这个例子中，条件部分的每个值都相当于 false，使用否定运算符后，就变成了 true。

if (!undefined
    && !null
    && !0
    && !NaN
    && !''
) {
  console.log('true');
} // true

下面两种写法，有时也用于将一个表达式转为布尔值。它们内部调用的也是 Boolean 函数。

// 写法一
expression ? true : false

// 写法二
!! expression
2.2 自动转换为字符串

JavaScript 遇到预期为字符串的地方，就会将非字符串的值自动转为字符串。具体规则是，先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串。

字符串的自动转换，主要发生在字符串的加法运算时。当一个值为字符串，另一个值为非字符串，则后者转为字符串。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

这种自动转换很容易出错。

const obj = {
  width: '100'
};

obj.width + 20 // "10020"

上面代码中，开发者可能期望返回 120，但是由于自动转换，实际上返回了一个字符 10020。

2.3 自动转换为数值

JavaScript 遇到预期为数值的地方，就会将参数值自动转换为数值。系统内部会自动调用 Number 函数。

除了加法运算符（+）有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值。

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

上面代码中，运算符两侧的运算子，都被转成了数值。

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

一元运算符也会把运算子转成数值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
avatar
文章
阅读
粉丝
相关推荐
JavaScript的类型转换
378阅读
 · 
26点赞
JavaScript类型转换全解析
243阅读
 · 
41点赞
面试官：说说Javascript数据类型和类型转换
2.5k阅读
 · 
13点赞
JavaScript 中四种常见的数据类型判断方法 🔥
2.7k阅读
 · 
20点赞
JavaScript 中的数据类型转换详解
868阅读
 · 
4点赞