javascript中字符串拼接详解


Posted in Javascript onSeptember 26, 2014

最近在研究《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模拟。

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 #Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 #Javascript
前端轻量级MVC框架CanJS详解
Sep 26 #Javascript
alert出数组中的随即值代码
Sep 25 #Javascript
jquery得到iframe src属性值的方法
Sep 25 #Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 #Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 #Javascript
You might like
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python提示No module named images的解决方法
2014/09/29 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python实现k-means聚类算法
2018/02/23 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
python编程的核心知识点总结
2021/02/08 Python
大三毕业自我鉴定
2014/01/15 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
运动会加油口号
2014/06/07 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
CPU不支持Windows11系统怎么办
2021/11/21 数码科技