乐趣区

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

jiezi

前言

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 (<anonymous>)
        at <anonymous>: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
退出移动版