前端基础整理-JS数据类型转换

前言

JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据，本文主要介绍有关数据类型的转换

JS数据类型

• 基础类型：string number boolean null undefined symbol
• 引用类型：object

显式类型转换

指的是主动调用函数实现数据类型的转换，隐式转换主要是基于以下三种方式进行：

Number函数

• number -> number

Number(666) // 666

• string -> number

Number('123') // 123
Number('') // 0
Number('123sd') // NaN

• boolean -> number

Number(true) // 1
Number(false) // 0

• null -> number

Number(null) // 0

• undefined -> number

Number(undefined) // NaN

• object -> number

1. 第一步先调用对象的valueOf方法，如果返回值为基本类型则不执行第二步
2. 第二部调用对象的toString方法，如果返回值为符合类型则报错

var a = {a: 1}
Number(a) // NaN
/** 内部执行流程 **/
var tmp1 = a.valeOf() // {a: 1}
var tmp2 = tmp.toString() // "[object Object]"
Number(tmp2) // NaN

String函数

• number -> string

String(123) // '123'

• string -> string

String('123') // '123'

• boolean -> string

String(true) // 'true'
String(false) // 'false'

• null -> string

String(null) // 'null'

• undefined -> string

String(undefined) // 'undefined'

• object -> string

1. 第一步先调toString方法，如果返回值不是基础类型执行第二步
2. 第二步调用valueOf方法，如果返回值不是基础类型，报错

var a = {a: 1}
String(a) // '[object Object]'

验证工作原理

a.toString = function () { return 'hi' }
String(a) // 'hi'
a.toString = function () { return [] }
a.valueOf = function () { return 'hello world' }
String(a) // 'hello world'
a.valueOf = function () { return {b: 1} }
String(a) // 报错
Error: Uncaught TypeError: Cannot convert object to primitive value
        at String ()
        at :10:1

Boolean函数

Boolean(+0)
Boolean(-0)
Boolean(NaN)
Boolean('')
Boolean(false)
Boolean(undefined)
Boolean(null)
// 都为false其余都为true

隐式类型转换

隐式转换的基石就是js引擎自动调用显示类型转换的方法，在以下三种情况下发生：

四则运算

+ 转String类型

1 + 'asd123' // '1asd123'

- * / 转Number类型

1 - 'asd123' // NaN
1 / 'asd123' // NaN
1 * 'asd123' // NaN

判断语句

转Boolean类型

1 - 'asd' || true // true
if ( 1 - 'asd') { ... } // false

native调用

按上述规则进行隐式转换

console.log(1-'asd123') // NaN
console.log(1 + 'asd123') // '1asd123'
...

类型检测typeof

参考资料

• MDN
• MKW