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 锁定弹出层实现代码
Feb 23 Javascript
js中switch case循环实例代码
Dec 30 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
node内置调试方法总结
Feb 22 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
JavaScript onclick事件使用方法详解
May 15 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 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript实现动态标签云
2015/10/16 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python 函数基础知识汇总
2018/03/09 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python操作链表的示例代码
2020/09/27 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
上课玩手机检讨书
2014/02/08 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
公司接待方案
2014/03/08 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
道歉信怎么写
2015/05/12 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Python3 类型标注支持操作
2021/06/02 Python