javascript中字符串拼接详解

最近在研究《javascript高级程序设计》中，有一段关于字符串特点的描述，原文大概如下：ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，他们的值就不能改变。要改变某个变量的保存的的字符串，首先要销毁原来的字符串，然后再用另外一个包含新值的字符串填充该变量，例如：

代码如下:

var lang = "Java";
lang = lang + "Script";

实现这个操作的过程如下：首先创建一个能容纳10个字符的新字符串，然后在这个字符串中填充“Java”和“Script”,最后一步是销毁原来的字符串“Java”和“Script”,因为这两个字符串已经没用了。但是在低版本的浏览器(如IE6)中，字符串拼接速度是很消耗一个性能的过程。

由此我就联想到了Java，在Java中的字符串机制也和js差不多（即创建了就不能改变，要改变只能销毁原来的值），但是Java有个StringBuffer解决了字符串不可变的问题，js且没有类似的方法。但是我们可以模拟这种缓冲机制。其原理是利用数组进行拼接，源代码如下：

代码如下:

function StringBuffer() {
    this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
    return this;    //方便链式操作
}
StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
}

/*测试*/
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");

var result = buffer.toString();
alert(result);

ps:gist地址如下：https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

机制我们模拟出来了，但是这个方法和字符串拼接性能上有多少差别了，我们可以测试一下，测试代码如下：

代码如下:

var d1 = new Date();
var str = "";
for(var i = 0; i < 10000; i++){
    str += "text ";
}
var d2 = new Date();
document.write("测试一花费: " + (d2.getTime() - d1.getTime())/1000 + "秒"+"<br/>");

var oBuffer = new StringBuffer();
d3 = new Date();
for(var i = 0; i < 10000; i++){
    oBuffer.append("text ");
}
var sResult = oBuffer.toString();
d4 = new Date();
document.write("测试二花费: " + (d4.getTime() - d3.getTime())/1000 + "秒");

测试结果如下：（环境不同，测试结果可能不同）：

1.在以1000次为基数的情况下，进行比较，两者执行都非常快(基本都是几毫秒)耗时都差不多，后者以前者相差不会超过10个毫秒。
 2.在以10000次为基数的情况下，执行结果和上面差不多，但是前者在IE6下话费的事件较多。
 3.在以100000次为基数的情况下,字符串拼接在IE6下，明显花的时间更多，其他浏览器相差不大，有的反而比StringBuffer更短。

结论

1.在拼接词数少于1000次的情况下，大胆的使用前者，一般我们也很少碰到拼接次数上千的情况。
 2.其他浏览器对于拼接都没什么性能问题，主要是IE6，如果拼接次数上万或者十万的话，建议单独对IE6是用StringBuffer模拟。

赞 (0)

相关推荐

  • JavaScript组合拼接字符串的效率对比测试

    在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值后动态分析创建HTML标签时,不过这里我就不讨论拼接字符串的具体应用了,我只是想在这里讨论一下拼接的效率. 字符串的拼接在我们写代码的时候都是用"+="这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如: 复

  • 浅谈jquery拼接字符串效率比较高的方法

    实例如下: var roleidArray = new Array(""); for(i = 0; i < rightRows.length; i++) { roleidArray.push(rightRows[i].id); } roleidArray = roleidArray.join(",").substring(1); 代码很简单,我就不做注释了 以上这篇浅谈jquery拼接字符串效率比较高的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • javascript字符串拼接的效率问题

    复制代码 代码如下: function xntest(){ var d1=new Date(); var str=""; for(var i=0;i<10000;i++){ str+="stext"; } var d2=new Date(); document.write(" 字符串拼接方式耗时:"+(d2.getTime()- d1.getTime())+"毫秒:"); d1=new Date(); var sb=ne

  • javascript中字符串拼接详解

    最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script"; 实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符串

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

  • Java字符串拼接详解

    目录 一.“+” 操作符 二.StringBuilder(非线程安全) 三.StringBuffer(线程安全) 四.String 类的 concat 方法 五.String 类的 join 方法 六.StringUtils.join 七.不建议在 for 循环中使用 “+” 进行字符串拼接 总结 String类原生的字符串处理方法short s=1;s=s+1;与short s=1;s+=1;的区别 一.“+” 操作符 “+” 操作符是字符串拼接最常用的方法之一.编译的时候会把 “+” 操作符

  • C/C++中字符串流详解及其作用介绍

    C/C++中字符串流详解及其作用介绍

    目录 概述 字符串流 理解字符串流 输出字符串对象 输入字符串流对象 输入输出字符串流对象 案例一 案例二 字符数组 vs 文件 总结 概述 文件流类和字符串流类都是 ostream, istream 和 iostream 类的派生类, 因此对它们的操作方法是基本相同的. 字符串流 文件流 字符串流 概念 文件流是以外存文件为输入输出对象的数据流 字符串流也 称为内存流, 以内存中用户定义的字符数组 (字符串) 为输入输出的对象 相关流类 ifstream, ofstream 和 fstream

  • Python中字符串切片详解

    Python中字符串切片详解

    目录 1.没有步长的简单切片 2.有步长的切片方式 在python中,我们定义好一个字符串,如下所示. 在python中定义个字符串然后把它赋值给一个变量.我们可以通过下标访问单个的字符,跟所有的语言一样,下标从0开始.这个时候呢,我们可以通过切片的方式来截取出我们定义的字符串的一部分.使用切片的时候我们有两种方式:没有步长的简单切片和有步长的切片方式 1.没有步长的简单切片 语法格式是这样的: 首先定义一格字符串,比如叫s,然后给它赋值 截取字符串中的一部分,我们用的语法是 s[ start:

  • javascript中Promise使用详解

    目录 一.首先,要知道为什么要用Promise语法? 二.接着,来了解一下回调地狱(Callback Hell) 三.最后,也是本章的重头戏,Promise的基本使用 (一) resolve函数 (二) rejected函数 (三)Promise的API 1. then 2. catch 3. finally 4. Promise.all 5. Promise.race 四.最后 前言: 做过前端开发的都知道,JavaScript是单线程语言,浏览器只分配给JS一个主线程,用来执行任务,但是每次

  • javascript中clone对象详解

    开发中,打断对象间的引用关系,只想下个副本的情况无处不在,clone一个对象就在所难免了. JavaScript中,简单的方法就是用JSON函数,将对象stringify成字符串,再parse成一个新对象.要么就是从网上搜个代码,开源社区里面clone的代码还是有不少的. 代码虽然可以找得到,但,东西永远是别人的,动手学着码永远是个不变的主题. 自己写了两个克隆的函数: cloneOwn:克隆自定义对象的自有属性,不包括继承的属性,属性可以是基本数据类型和数组,自定义的对象,可以制定要克隆的属性

  • 比较全面的C 、Java、JavaScript中的正则表达式详解

    什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作 模式(Pattern) ,这篇文章就是 要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开

  • javascript中字符串拼接需注意的问题

    在开发中大家也都会注意尽量使用StringBuilder而不采用普通的字符串拼接方式.但是可能大部分开发者却忽略了js中也需要注意这种效率问题. 下面进行一项性能测试,用事实来说话! 复制代码 代码如下: function xntest(){ var d1=new Date(); var str=""; for(var i=0;i<10000;i++){ str+="stext"; } var d2=new Date(); document.write(&qu

  • Javascript中的 “&” 和 “|” 详解

    Javascript中的 “&” 和 “|” 详解

    一.前言: 在文章开始之前,先出几个题目给大家看看: var num1 = 1 & 0; console.log(num1); // 0 var num2 = 'string' & 1; console.log(num2); // 0 var num3 = true & 1; console.log(num3); // 1 var num4 = undefined | false; console.log(num4); // 0 var num5 = undefined | tru

随机推荐