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 相关文章推荐
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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
一个多文件上传的例子(原创)
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python cs架构实现简单文件传输
2020/03/20 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python 初始化一个定长的数组实例
2019/12/02 Python
深入了解NumPy 高级索引
2020/07/24 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
档案室主任岗位职责
2014/02/12 职场文书
岗位聘任书范文
2014/03/29 职场文书
一帮一活动总结
2014/05/08 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang