• 技术文章 >web前端 >前端问答

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

    长期闲置长期闲置2022-01-12 18:05:50转载73
    本篇文章给大家带来了JavaScript中类型转换的相关知识,将值转换为原始值、转换为数字和转换为字符串,这刚好对应了引擎内部的三种抽象操作:ToPrimitive()、ToNumber()、ToString(),希望对大家有帮助。

    JavaScript 加法规则

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

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

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

    类型转换

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

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

    ToPrimitive(input, PreferredType?)

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

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

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

    01.png

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

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

    02.png

    如果输入的值是一个对象,则会首先会调用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

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

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

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

    []+[]

    输出: ''

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

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

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

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

    {} + {}

    输出:NaN

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

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

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

    总结

    对象.valueOf() === 对象

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

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

    Javacript 中 + 号工作:

    【相关推荐:javascript学习教程

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

    声明:本文转载于:掘金,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript 前端 html
    上一篇:仅仅使用HTML/CSS实现各类进度条的方式(整理分享) 下一篇:哪种列表形式在HTML5中被废弃

    相关文章推荐

    • JavaScript怎样注释掉某行代码• javascript中export的意思是什么• javascript splice方法怎么用• init在JavaScript中的意思是什么• javascript中writeln的意思是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网