`

JavaScript 字符串连接性能问题质疑

    博客分类:
  • js
阅读更多

w3school 的 ECMAScript 定义类或对象 中举了个例子来说明javascript中字符串连接的性能问题

 

ECMAScript 中最常见的一个问题是字符串连接的性能。与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变。请考虑下面的代码:

var str = "hello ";
str += "world";

实际上,这段代码在幕后执行的步骤如下:

  1. 创建存储 "hello " 的字符串。
  2. 创建存储 "world" 的字符串。
  3. 创建存储连接结果的字符串。
  4. 把 str 的当前内容复制到结果中。
  5. 把 "world" 复制到结果中。
  6. 更新 str,使它指向结果。

每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:

  1. 创建存储结果的字符串
  2. 把每个字符串复制到结果中的合适位置

然后举了一个代码例子,来说明性能。

 

function StringBuffer () {
  this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
  this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
  return this._strings_.join("");
};

var d1 = new Date();
var str = "";
for (var i=0; i < 100000; i++) {
    str += "text";
}
var d2 = new Date();

console.log(d2.getTime() - d1.getTime());

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 100000; i++) {
    buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();

console.log(d2.getTime() - d1.getTime());

 我机器上的结果是

75
125
直接拼接的性能好于使用数组,一个可能的解释是创建对象也要消耗较多的时间。

欢迎评论啊,:-D

分享到:
评论

相关推荐

    javascript 字符串连接的性能问题(多浏览器)

    这里需要注意的是,最新版本的Firefox已经修复了字符串连接性能问题,而旧版本的Firefox(如1.0或之后的版本)可能比普通的字符串连接更慢。 根据这些实验结果,可以得出以下几点关于字符串连接性能的知识点: 1. ...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册九:字符串

    2. 连接字符串:可以使用`+`运算符或`concat()`方法连接字符串。 3. 字符串切割:`slice()`, `substring()`, `substr()`用于截取字符串,`split()`根据分隔符切割成数组。 4. 查找替换:`indexOf()`查找指定子串首次...

    theredoc让多行JavaScript字符串看起来排版更好

    然而,JavaScript原生不支持多行字符串,我们通常使用反斜杠(\)来连接多行,但这会导致代码可读性降低,排版混乱。为了解决这个问题,出现了诸如`template literals`(模板字面量)的特性,但有时它们仍不能满足对...

    你必须知道的JavaScript 中字符串连接的性能的一些问题

    在探讨JavaScript编程中,字符串连接是常见操作之一,但其性能问题往往会被人忽视。由于JavaScript的核心规范ECMAScript中字符串的不可变性,即字符串一旦创建,其内容就不能被改变,这意味着每次字符串连接操作实际...

    JavaScript 字符串连接性能优化

    标题提到的“JavaScript字符串连接性能优化”就是针对这一问题进行的探讨。 通常,我们使用`+`运算符或者`+=`来连接字符串,但这种方式在连续拼接大量字符串时效率低下。描述中提到,通过使用类似Java中的`...

    再论Javascript下字符串连接的性能

    然而,这种方法在处理大量连接时,由于JavaScript每次连接都会创建一个新的字符串对象,因此性能可能不尽如人意,特别是当字符串需要重复拼接时。 为了解决这个问题,开发者经常利用数组来模拟其他语言中的...

    javascript实现的字符串与十六进制表示字符串相互转换方法

    本文实例讲述了javascript实现的字符串与十六进制表示字符串相互转换方法。分享给大家供大家参考。具体如下: 之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6...

    JavaScript判断一个字符串是否包含指定子字符串的方法

    使用`includes`方法非常简单,它直接属于字符串对象,不需要通过原型扩展,也不用担心字符串特殊字符的问题,是推荐的现代JavaScript实践中的方法。 在介绍完方法之后,文章还提供了一个具体的使用示例。示例中通过...

    javascript 字符串去掉左右空格

    javascript 字符串去掉左右空格, 用正则实现, trim()功能, 简单易用.

    JavaScript截取中文字符串

    ### JavaScript截取中文字符串知识点详解 #### 一、引言 在进行文本处理时,我们经常需要对字符串进行截取操作。特别是在处理包含多种字符集(如英文与中文)的字符串时,考虑到不同字符编码长度的差异性,简单地...

    Javascript三种字符串连接方式及性能比较

    JavaScript语言在处理字符串连接操作时提供了多种方法,而不同的连接方式在性能上有所差异,尤其是在大量字符串连接操作时这种差异会更为明显。本文将详细介绍三种常见的JavaScript字符串连接方式,并通过实际性能...

    连接 字符 串.rar

    - **Java**:在Java中,`+`运算符可以用于连接字符串,但频繁使用会导致性能问题,因为每次连接都会创建新的字符串对象。更高效的方案是使用`StringBuilder`或`StringBuffer`类。 - **JavaScript**:JavaScript的`...

    js以逗号分隔方式添加删除字符串

    在JavaScript(JS)中,处理字符串是常见的编程任务之一,特别是在构建动态网页和应用程序时。本文将深入探讨如何以逗号或其他自定义分隔符来添加或删除字符串,并且会强调不支持正则表达式中的特殊字符。我们将通过...

    JavaScript 字符串方法

    JavaScript 字符串方法

    以太坊solidity字符串拼接实现

    不过,在Solidity编程语言中,由于其特定的类型系统和内存管理机制,没有像其他高级编程语言(如JavaScript或Python)中那样直接支持字符串拼接运算符。因此,开发者需要了解如何在Solidity中实现字符串拼接,这通常...

    JavaScript中判断两个字符串是否相等的方法

    在JavaScript中判断两个字符串是否相等是编程基础中的重要内容,尤其对于初学者来说,理解字符串相等性的判断方法对于编写有效的代码至关重要。首先,要了解JavaScript提供了两种相等性运算符:“==”和“===”。这...

    JavaScript字符串查找1

    在JavaScript编程中,字符串查找是常见的操作,尤其是在处理文本数据时。本文主要关注的是最基础的字符串查找算法——朴素搜索法。这是一种简单直观的方法,但效率较低,适用于小规模的数据处理。 **一、字符串查找...

    截取指定长度的字符串

    在实际编程中,可以根据具体需求选择合适的方法,并结合其他字符串操作,如查找、替换、连接等,以实现更复杂的字符串处理任务。记住,实践是检验理解的最佳方式,所以尝试编写一些代码来练习这个概念吧!

Global site tag (gtag.js) - Google Analytics