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 相关文章推荐
splice slice区别
Oct 09 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
ajax请求前端跨域问题原因及解决方案
Oct 16 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中zip_open()函数用法
2019/02/15 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
CentOS中升级Python版本的方法详解
2017/07/10 Python
PyQT实现多窗口切换
2018/04/20 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
《童年》教学反思
2014/02/18 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
法定代表人授权委托书
2014/09/19 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
个人廉洁自律总结
2015/03/06 职场文书
交通事故代理词范文
2015/05/23 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Pandas 数据编码的十种方法
2022/04/20 Python