欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript类型转换(详解及实例)

程序员文章站 2022-03-06 13:13:35
...
本篇文章给大家带来了JavaScript中类型转换的相关知识,将值转换为原始值、转换为数字和转换为字符串,这刚好对应了引擎内部的三种抽象操作:ToPrimitive()、ToNumber()、ToString(),希望对大家有帮助。

JavaScript类型转换(详解及实例)

JavaScript 加法规则

在JavaScript中,加法的规则其实很简单,只有两种情况:

  • 数字和数字相加

  • 字符串和字符串相加

所有其他类型的值都会被自动转换成这两种类型的值

在JavaScript中,一共有两种类型的值:

  • 原始值有:undefined、null、 布尔值(boolean)、 数字(number)、字符串(string)、symbol

  • 对象值:其他的所有值都是对象类型的值,包括数组(arrays)和函数(functions)

类型转换

加法运算符会触发三种类型转换:将值转换为原始值、转换为数字、转换为字符串,这刚好对应了JavaScript引擎内部的三种抽象操作:ToPrimitive()、ToNumber()、ToString()

通过 ToPrimitive() 将值转换为原始值

ToPrimitive(input, PreferredType?)

可选参数PreferredType可以是Number或者String,它只代表了一个转换的偏好,转换结果不一定必须是这个参数所指的类型,但转换结果一定是一个原始值.如果PreferredType被标志为Number,则会进行下面的操作来转换输入的值 (§9.1):

  • 如果输入的值已经是个原始值,则直接返回它.

  • 否则,如果输入的值是一个对象.则调用该对象的valueOf()方法.如果valueOf()方法的返回值是一个原始值,则返回这个原始值.

  • 否则,调用这个对象的toString()方法.如果toString()方法的返回值是一个原始值,则返回这个原始值.

  • 否则,抛出TypeError异常.

如果PreferredType被标志为String,则转换操作的第二步和第三步的顺序会调换.如果没有PreferredType这个参数,则PreferredType的值会按照这样的规则来自动设置: Date类型的对象会被设置为String,其它类型的值会被设置为Number.

通过ToNumber()将值转换为数字

JavaScript类型转换(详解及实例)

如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, Number)将该对象转换为原始值,然后在调用ToNumber()将这个原始值转换为数字.

通过ToString()将值转换为字符串

JavaScript类型转换(详解及实例)

如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, String)将该对象转换为原始值,然后再调用ToString()将这个原始值转换为字符串.

demo

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // 没有返回原始值
    },
    toString: function () {
        console.log("toString");
        return {}; // 没有返回原始值
    }
}

Number作为一个函数被调用(而不是作为构造函数调用)时,会在引擎内部调用ToNumber()操作:

Number(obj)
// output
valueOf
toString
Uncaught TypeError: Cannot convert object to primitive value
String(obj)
// output
toString
valueOf
Uncaught TypeError: Cannot convert object to primitive value

加法

    value1 + value2

在计算这个表达式时,操作步骤是这样的:

  • 将两个操作数转换为原始值 (下面是数学表示法,不是JavaScript代码):

    prim1 := ToPrimitive(value1)
    prim2 := ToPrimitive(value2)

PreferredType被省略,因此 Date 类型的值采用String,其他类型的值采用Number.

  • 如果 prim1 或者 prim2 中的任意一个为字符串,则将另外一个也转换成字符串,然后返回两个字符串连接操作后的结果;

  • 否则,将 prim1 和 prim2 都转换为数字类型,返回他们的和。

[]+[]

输出: ''

[]会被转换成一个原始值,首先尝试 valueOf() 方法,返回数组本身(this):

> var arr = [];
> arr.valueOf() === arr
true

这样的结果不是原始值,所以再调用 toString() 方法,返回一个空字符串(是一个原始值)。因此,[] + [] 的结果实际上是两个空字符串的连接.

> [] + {}
'[object Object]'

{} + {}

输出:NaN

  • JavaScript引擎将第一个{}解释成了一个空的代码块并忽略了它

  • 这里的加号并不是代表加法的二元运算符,而是一个一元运算符,作用是将它后面的操作数转换成数字,和 Number() 函数完全一样。例如:

+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
> {} + []
0
  • {} 忽略

  • +[] = Number([]) = Number([].toString()) = Number("") = 0

有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'

总结

对象.valueOf() === 对象

数组对象.toString() === 数组对象.join()

对象.toString() === "[object Object]"

Javacript 中 + 号工作:

  • 数字 + 数字

  • 字符串 + 字符串

【相关推荐:javascript学习教程

以上就是JavaScript类型转换(详解及实例)的详细内容,更多请关注其它相关文章!