V8实现字符串拼接

 更新时间:2023年05月04日 15:13:20   作者:codinglin  
本文主要介绍了V8实现字符串拼接,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

在之前的一篇文章 JavaScript 隐式类型转换规则中有提到,JavaScript 中的加号可以用来拼接字符串。本文就具体来介绍一下 V8 是如何来执行这一操作的......

V8 是怎么执行加法操作的?

当有两个值相加的时候,比如:

a+b

通俗理解,V8 会提供了一个 ToPrimitive 方法,其作用是将 ab 转换为原始数据类型,其转换流程如下:

  • 先检测该对象中是否存在 valueOf 方法,如果有并返回了原始类型,那么就使用该值进行强制类型转换。
  • 如果 valueOf 没有返回原始类型,那么就使用 toString 方法的返回值。
  • 如果 vauleOftoString 两个方法都不返回基本类型值,便会触发一个 TypeError 的错误。

将对象转换为原始类型的流程图如下所示:

当 V8 执行 1+"2" 时,因为这是两个原始值相加,原始值相加的时候,如果其中一项是字符串,那么 V8 会默认将另外一个值也转换为字符串,相当于执行了下面的操作:

Number(1).toString() + "2"

这里,把数字 1 偷偷转换为字符串 "1" 的过程也称为强制类型转换,因为这种转换是隐式的,所以如果我们不熟悉语义,那么就很容易判断错误。

我们还可以再看一个例子来验证上面流程,你可以看下面的代码:

var Obj = {
    toString() {
      return '200'
    }, 
    valueOf() {
      return 100
    }   
  }
  Obj+3

执行这段代码,你觉得应该返回什么内容呢?由于需要先使用 ToPrimitive 方法将 Obj 转换为原始类型,而 ToPrimitive 会优先调用对象中的 valueOf 方法,由于 valueOf 返回了 100,那么 Obj 就会被转换为数字 100,那么数字 100 加数字 3,那么结果当然是 103 了。

如果改造一下代码,让 valueOf 方法和 toString 方法都返回对象,其改造后的代码如下:

var Obj = {
    toString() {
      return new Object()
    }, 
    valueOf() {
      return new Object()
    }   
  }
  Obj+3

再执行这段代码,你觉得应该返回什么内容呢?因为 ToPrimitive 会先调用 valueOf 方法,发现返回的是一个对象,并不是原生类型,当 ToPrimitive 继续调用 toString 方法时,发现 toString 返回的也是一个对象,都是对象,就无法执行相加运算了,这时就会抛出一个异常,异常如下所示:

Uncaught TypeError: Cannot convert object to primitive value

提示的是类型错误,错误原因是无法将对象类型转换为原始类型。所以说,在执行加法操作的时候,V8 会通过 ToPrimitive 方法将对象类型转换为原始类型,最后就是两个原始类型相加,如果其中一个值的类型是字符串时,则另一个值也需要强制转换为字符串,然后做字符串的连接运算。在其他情况时,所有的值都会转换为数字类型值,然后做数字的相加。

总结

在 JavaScript 中,类型系统是依据 ECMAScript 标准来实现的,所以 V8 会严格根据 ECMAScript 标准来执行。在执行加法过程中,V8 会先通过 ToPrimitive 函数,将对象转换为原始字符串或者是数字类型,在转换过程中,ToPrimitive 会先调用对象的 valueOf 方法,如果没有 valueOf 方法,则调用 toString 方法,如果 vauleOftoString 两个方法都不返回基本类型值,便会触发一个 TypeError 的错误。

到此这篇关于V8实现字符串拼接的文章就介绍到这了,更多相关V8 字符串拼接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测,爱其他浏览器中兼容性还不错 结果到了火狐(FireFox)浏览器下setTimeout这个JS内置函数不执行了,本文将提供详细的解决方法
    2012-11-11
  • Js使用WScript.Shell对象执行.bat文件和cmd命令

    Js使用WScript.Shell对象执行.bat文件和cmd命令

    这篇文章主要介绍了Js使用WScript.Shell对象执行.bat文件和cmd命令,需要的朋友可以参考下
    2014-12-12
  • Javascript Web Slider 焦点图示例源码

    Javascript Web Slider 焦点图示例源码

    Slider 焦点图会在很多的网站上见到,在本文为大家详细介绍下具体的实现过程,下面的源码大家可以运行下
    2013-10-10
  • javascript过滤危险脚本方法

    javascript过滤危险脚本方法

    脚本藏身之处不过有四: 1、<script>标签、<link>标签、<style>标签、iframe标签 2、on开头的标签属性 3、javascript(vbscript)伪协议 4、css的epression
    2008-08-08
  • 详解JavaScript函数

    详解JavaScript函数

    这篇文章主要介绍了JavaScript函数,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块,需要的朋友可以参考下
    2015-12-12
  • JS去除字符串两端空格的简单实例

    JS去除字符串两端空格的简单实例

    本篇文章主要是对JS去除字符串两端空格的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript实现鼠标经过表格某行时此行变色

    JavaScript实现鼠标经过表格某行时此行变色

    这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格某行时此行变色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • BOM操作querySelector querySeletorAll获取标签对象

    BOM操作querySelector querySeletorAll获取标签对象

    这篇文章主要为大家介绍了BOM操作querySelector querySeletorAll获取标签对象步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 微信小程序自定义tabbar实现突出样式详解流程

    微信小程序自定义tabbar实现突出样式详解流程

    tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 详解JavaScript 中的变量声明与赋值

    详解JavaScript 中的变量声明与赋值

    在 JavaScript 中使用变量或常量之前,必须先进行声明,这篇文章主要介绍了JavaScript中的变量声明与赋值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论