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 相关文章推荐
javascript Array.prototype.slice使用说明
Oct 11 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
package.json配置文件构成详解
Aug 27 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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获取文件相对路径的方法
2015/02/26 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
超清晰的document对象详解
2007/02/27 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python中解析json格式文件的方法示例
2017/05/03 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
师德个人剖析材料
2014/02/02 职场文书
会计人员岗位职责
2014/03/19 职场文书
社会实践活动总结
2015/02/05 职场文书
个人优缺点总结
2015/02/28 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python