note
  • Introduction
  • algorithm
    • Array
    • BinarySearch
    • Bits
    • Design
    • DFS
    • DP
    • DP_bag
    • DP_stock.md
    • Hash
    • Heap
    • NodeList
    • Number
    • SlideWindow
    • Sort
    • Stack
    • String
    • Tree
  • Backend
    • express
    • koa2
    • node
    • npm
    • npx
  • db
    • mongoDB
  • Frontend
    • CSS
      • BFC
      • flex
      • layout
      • less
      • middle
      • position
      • sass
      • selector
      • 动画相关属性
      • 响应式页面
      • 层叠上下文
      • 隐藏元素
    • JS
      • Array
      • async
      • DOM
      • ES6
      • JS-军规
      • macrotask-microtask
      • practice
      • RegExp
      • this-prototype-inherit
      • type-convert
      • 前端请求
      • 浏览器加载
      • 浏览器窗口间通信
    • TS
      • note
    • Vue
      • practice
      • Component-Communicate
      • Component
      • lifecycle
      • note
      • Pinia
      • practice
      • Vue-cli
      • Vue-Router
      • Vue-Source
      • Vue2
      • Vue3
      • Vuex
    • cross-domain
    • webpack
    • 从前端角度理解缓存
    • 前端概念
    • 页面性能分析与优化
    • 页面渲染机制
  • Linux
    • basic-command
    • docker
    • java-env
    • learn
    • manage-command
    • nginx
    • Shell
    • ssh
    • tmux
    • vi
  • chrome-devtools
  • git
  • Jenkins
Powered by GitBook
On this page
  1. Frontend
  2. JS

type-convert

Previousthis-prototype-inheritNext前端请求

Last updated 2 years ago

数据类型

  • Boolean、Null、Undefined、Number、String、Symbol

  • Object(Array、Regex、Date、Error)

显式强制类型转换

1 ToPrimitive(obj[,type])

  • type为string

调用obj的toString方法,如果为原始值,则返回,否则进行第2步

调用obj的valueOf方法,如果为原始值,则返回,否则进行第3步

抛出错误

  • type为number

调用obj的valueOf方法,如果为原始值,则返回,否则进行第2步

调用obj的toString方法,如果为原始值,则返回,否则进行第3步

抛出错误

  • type参数为空

该对象为Date,则默认转换成string类型

否则,默认转换成number类型

隐式类型某个引用类型转换为原始值就是在后台调用ToPrimitive方法, 转换逻辑就和type参数为空时的转换逻辑一致

2. toString

每个对象都有一个 toString() 方法,当对象被表示为文本值时或者当以期望字符串的方式引用对象时,该方法被自动调用

3. valueOf

不同内置对象的valueOf实现:

  • String => 返回字符串值

  • Number => 返回数字值

  • Date => 返回一个数字,即时间值,字符串中内容是依赖于具体实现

  • Boolean => 返回Boolean的this值

  • Array => 默认返回自身

  • Object => 默认返回自身,可以通过重写对象的valueOf方法来让它返回我们想要的结果

4. Number

Number运算符转换规则:

  • null 转换为0

  • undefined 转换为NaN

  • true转换为1, false转换为0

  • 字符串转换时遵循数字常量转换规则,转换失败返回NaN

  • 如果要调用Number方法转换对象,则会调用ToPrimitive转换,type指定为number

4. String

String 运算符转换规则

  • null 转换为null

  • undefined 转换为 undefined

  • true 转换为true,false 转换为 false

  • 数字转换遵循通用规则,极大极小的数字使用指数形式

  • 如果要调用String方法转换对象,则会调用ToPrimitive转换,type指定为string

5. Boolean

  • falsy(undefined、null、-0、0或+0、NaN、''、 false)

Example

后台返回值为一个字符串,内容是0 ~ 5的数字,现在使用时需将参数转化为数字类型

// wrong
return Number(value)
// '' -> 0
// undefined -> throw TypeError
// 'aaa' -> NaN

// 前面是剔除掉''、undefined ,后面剔除掉NaN的类型
if (value && Number(value) >= 0) {
  return Number(value)
} else {
  return null
}

浮点数转换成整型

很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()

转换 trick

let myVar = '3.1415'
    str = '' + myVar
    i_int = ~~myVar // to integer,对正数来说 ~~运算结果与Math.floor()运算结果相同,而对于负数来说与Math.ceil()的运算结果相同
	  f_float = 1 * myVar  //or to int, then check NaN
    b_bool = !!myVar
    arr = [myVar]

		+'123' //str to number, then check NaN
    1.3 | 0 //number to integer,对正数来说 ~~运算结果与Math.floor()运算结果相同,而对于负数来说与Math.ceil()的运算结果相同
    !!(num & 1) //check if odd number or not

//字符串比较时间先后大小是按照字符串从左到右每个字符的charCode来的,所以特别要注意时间形式注意补0
'21:00' < '09:10'
'21:00' < '9:10'

关于值的比较,当我们只关心值是否正常时,比较靠谱的方法:正则表达式,上面的例子也可以这样来

if (/[0-5]/.test(value)) {
  return Number(value)
} else {
  return null
}

小结:在判断两个值是否相等时,最好显式的转化,让代码更加清晰易读,然后用全等运算符 === 或者 !== 来比较

隐式强制类型转换

加法运算符

  • 当一侧为String类型时,另一侧也会被转换成字符串类型,做拼接操作

  • 当一侧为Number类型,另一侧为非String类型的原始类型时,另一侧会被转换成number类型,做加法运算

  • 当一侧为Number类型,另一侧为引用类型时,会将引用类型和Number类型都转换成字符串做拼接操作

除了Number类型 + (Null, Undefined, Boolean,Number)会做加法运算,其他情况下都是做字符串拼接操作

if语句和逻辑语句

==

  • null除了跟自己和undefined相比返回true,其他返回false

  • undefined除了和自己和null相比返回true,其他返回false

  • NaN和任何值比较都返回false

  • Boolean跟其他类型的值比较,会被转换为Number类型

  • true只有和1比较会返回true, false只有和0比较会返回true

  • String和Number比较,现将String转换为Number

  • 当原始类型和引用类型做比较时,对象类型会依照ToPrimitive规则转换为原始类型, {}放在运算符左侧会报错

ToBoolean

  • if (..) 语句中的天健判断表达式。

  • for (.. ; .. ; ..) 语句中的条件判断表达式。

  • while (..) 循环中的条件判断表达式。

  • ? : 中的条件判断表达式

对象转换为原始值

对象转换为字符串 String(Object)

  1. 当对象具有toString()会优先调用

  2. 如果没有toString()方法,或者toString()没有返回一个原始值,则会调用valueOf()方法

  3. 无法从toString()和valueOf()获取原始值的时候,则会抛出一个类型错误异常

String([1,2,3])  // "1,2,3"
String(function(x) {return x+1})  // "function(x) {return x+1;}"
String("/\d+/g") // "/\d+/g"
String(new Date(2019,4,14)) // "Tue May 14 2019 00:00:00 GMT+0800 (中国标准时间)"

对象转换为数字 Number(Object)

  1. 当对象具有valueOf()会优先调用

  2. 如果没有valueOf()方法,或者valueOf()没有返回一个原始值,则会调用toString()方法

  3. 无法从toString()和valueOf()获取原始值的时候,则会抛出一个类型错误异常

Number([1,2,3])  // NaN 原始类型
Number(function(x) {return x+1;})  // NaN
Number("/\d+/g") // NaN
Number(new Date(2019,4,14)) // 1557763200000

当判断两个数组是否相等时,可以简单的将其转换为String类型进行比较

|| 和 && 的做操作数 而 switch 语句使用的是全等判断,不会发生隐式的强制转换

当判断两个对象是否相等时,就需要借助其他工具, 比如

js compare
lodash