javascript中字符串拼接需注意的问题


Posted in Javascript onJuly 13, 2010

在开发中大家也都会注意尽量使用StringBuilder而不采用普通的字符串拼接方式。但是可能大部分开发者却忽略了js中也需要注意这种效率问题。
下面进行一项性能测试,用事实来说话!

function xntest(){ 
var d1=new Date(); 
var str=""; 
for(var i=0;i<10000;i++){ 
str+="stext"; 
} 
var d2=new Date(); 
document.write("字符串拼接方式耗时:"+(d2.getTime()- d1.getTime())+"毫秒;"); 
d1=new Date(); 
var sb=new StringBuilder(); 
for(var i=0;i<10000;i++){ 
sb.append("stext"); 
} 
var result=sb.toString(); 
d2=new Date(); 
document.write("数组方式耗时:"+(d2.getTime()- d1.getTime())+"毫秒;"); 
} 
/////利用Array实现的字符串拼接函数,为方便c#开发者特意取名StringBuilde以便于理解 
function StringBuilder(){ 
this._strings_=new Array; 
} 
StringBuilder.prototype.append=function(str){ 
this._strings_.push(str); 
}; 
StringBuilder.prototype.toString=function(){ 
return this._strings_.join(""); 
};

三次执行 xntest()函数后的结果为:

字符串拼接方式耗时:735毫秒;数组方式耗时:62毫秒;
字符串拼接方式耗时:766毫秒;数组方式耗时:63毫秒;
字符串拼接方式耗时:703毫秒;数组方式耗时:63毫秒;

此例是拼接10000次字符串的性能测试,相信结果大家有目共睹,有兴趣的朋友可以自己测试一下。
所以 ,在前台开发中我们也应尽量避免大规模的字符串拼接操作,应采用数组方式来合理提高代码效率。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
vue如何截取字符串
May 06 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
什么是SOLID
Mar 24 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 #Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 #Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 #Javascript
不同浏览器的怪癖小结
Jul 11 #Javascript
return false;和e.preventDefault();的区别
Jul 11 #Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 #Javascript
js 模拟气泡屏保效果代码
Jul 10 #Javascript
You might like
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
子页向父页传值示例
2013/11/27 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python实现ID3决策树算法
2017/12/20 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python 2.7.14安装图文教程
2018/04/08 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
企业领导对照检查材料
2014/08/20 职场文书
课外科技活动总结
2014/08/27 职场文书
确保工程质量承诺书
2015/04/29 职场文书
党小组意见范文
2015/06/08 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL