温故知新——JavaScript中的字符串连接问题最全总结(推荐)

 更新时间:2017年08月21日 14:33:44   作者:momomini  
这篇文章主要介绍了JS中的字符串连接问题,ECMAScript 中最常见的一个问题是字符串连接的性能。在调用 join() 方法时才会发生连接操作,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

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、把每个字符串复制到结果中的合适位置

虽然这种解决方案很好,但还有更好的方法。问题是,这段代码不能确切反映出它的意图。要使它更容易理解,可以用 StringBuffer 类打包该功能:

function StringBuffer () {
 this._strings_ = new Array();
}
StringBuffer.prototype.append = function(str) {
 this._strings_.push(str);
};
StringBuffer.prototype.toString = function() {
 return this._strings_.join("");
};

这段代码首先要注意的是 strings 属性,本意是私有属性。它只有两个方法,即 append() 和 toString() 方法。append() 方法有一个参数,它把该参数附加到字符串数组中,toString() 方法调用数组的 join 方法,返回真正连接成的字符串。要用 StringBuffer 对象连接一组字符串,可以用下面的代码:

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

可用下面的代码测试 StringBuffer 对象和传统的字符串连接方法的性能:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
 str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");
var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
 buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持!

相关文章

  • JSON对象转化为字符串详解

    JSON对象转化为字符串详解

    这篇文章主要介绍了JSON对象转化为字符串,文章介绍了参数的含义,value 用法,space 的用法,需要的朋友可以参考下
    2017-08-08
  • JavaScript基础之运算符

    JavaScript基础之运算符

    这篇文章主要介绍了如何理解JavaScript中的运算符,帮助大家更好的学习JavaScript,感兴趣的朋友可以了解下
    2021-11-11
  • js实现unicode码字符串与utf8字节数据互转详解

    js实现unicode码字符串与utf8字节数据互转详解

    这篇文章主要介绍了js实现unicode码字符串与utf8字节数据互转,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript函数命名的三种方式及区别介绍

    javascript函数命名的三种方式及区别介绍

    下面小编就为大家带来一篇javascript函数命名的三种方式及区别介绍。小编觉得挺不错的,现在分享给大家,给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • 深入学习JavaScript中的原型prototype

    深入学习JavaScript中的原型prototype

    这篇文章主要介绍了深入学习JavaScript中的原型prototype,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-08-08
  • 了解前端理论:rscss和rsjs

    了解前端理论:rscss和rsjs

    在前端开发中,我们会尝试去定一些规则和约定,来让项目质量更高,更易于维护。而对于这些规则和约定,我们也会希望它内容简单,容易理解。下面小编来和大家一起学习一下
    2019-05-05
  • JavaScript入门教程(4) js浏览器对象

    JavaScript入门教程(4) js浏览器对象

    navigator 浏览器对象,包含了正在使用的 Navigator 的版本信息。反映了当前使用的浏览器的资料。JavaScript 客户端运行时刻引擎自动创建 navigator 对象。
    2009-01-01
  • 老生常谈JavaScript数组的用法

    老生常谈JavaScript数组的用法

    下面小编就为大家带来一篇老生常谈JavaScript数组的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Javascript堆排序算法详解

    Javascript堆排序算法详解

    这篇文章主要介绍了Javascript堆排序算法及其示例,非常实用,需要的朋友可以参考下
    2014-12-12
  • 中文路径导致unitpngfix.js不正常的解决方法

    中文路径导致unitpngfix.js不正常的解决方法

    本篇文章是对中文路径导致unitpngfix.js不正常的解决方法进行了详细的分析介绍,需要的朋友参考下
    2013-06-06

最新评论