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插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
大学生应聘自荐信
2013/10/11 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2019求职信大礼包
2019/05/15 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python