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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
详解python eval函数的妙用
2017/11/16 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python爬虫添加请求头代码实例
2019/12/28 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
年度考核自我鉴定
2014/03/19 职场文书
煤矿安全生产标语
2014/06/06 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
投标售后服务承诺书
2015/04/29 职场文书
横空出世观后感
2015/06/09 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang