浅谈JS中的三种字符串连接方式及其性能比较


Posted in Javascript onSeptember 02, 2016

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较。

第一种方法 用连接符“+”把要连接的字符串连起来:

str="a";
str+="b";

毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便。

第二种方法 以数组作为中介用 join 连接字符串:

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

w3school 网站介绍说这种方法要比第一种消耗更少的资源,速度也更快,后面我们通过实验再验证是否是这样。

第三种方法 利用对象属性来连接字符串

function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join();
}
  var mystr=new stringConnect;
  mystr.append("a");
  var str=mystr.toString();

利用下面代码对三种方法性能进行比较,通过更改 c 的值来调整连接字符串的个数:

var str="";
var d1,d2;
var c=5000;//连接字符串的个数


//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join("");
}
  var mystr=new stringConnect;

  for(var i=0;i<c;i++){
    mystr.append("a");
  }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
  var arr=new Array();
for(var i=0;i<c;i++){
  arr.push("a");
}
str=arr.join("");
  d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
  str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

我调整 c 分别等于5000、50000、500000、5000000,每个数值分别测了10次,最后结果如下:

c=5000
平均耗时(单位毫秒)
第三种 3 2 2 3 1 2 2 1 1 1 1.8
第二种 1 3 0 3 1 3 4 1 4 2 2.2
第一种 0 0 0 0 0 1 1 1 1 1 0.5

c=50000

第三种 22 12 9 14 12 13 13 13 10 17 13.5
第二种 8 13 12 8 11 11 8 9 8 9 9.7
第一种 7 12 5 11 10 10 10 13 16 12 10.6

c=500000

第三种 104 70 74 69 76 77 69 102 73 73 78.7
第二种 78 100 99 99 100 98 96 71 94 97 93.2
第一种 90 87 83 85 85 83 84 83 88 86 85.4

c=5000000

第三种 651 871 465 444 1012 436 787 449 432 444 599.1
第二种 568 842 593 747 417 747 719 549 573 563 631.8
第一种 516 279 616 161 466 416 201 495 510 515 417.5

统计5000000的时候在地址栏加入了随机参数,应该是避免了缓存的影响的。从结果来看,第一种方法并不比另2种方法消耗多,甚至还更有优势,这点和手册上的说明明显不一致。

测试系统:win 7旗舰

浏览器:chrome 52.0.2739.0 m

以上这篇浅谈JS中的三种字符串连接方式及其性能比较就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在新窗口打开超链接的方法小结
Apr 14 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
AngularJs  E2E Testing 详解
Sep 02 #Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 #Javascript
AngularJs Understanding the Controller Component
Sep 02 #Javascript
JS 拼凑字符串的简单实例
Sep 02 #Javascript
AngularJs Understanding the Model Component
Sep 02 #Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 #Javascript
You might like
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
轮播的简单实现方法
2016/07/28 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
python3抓取中文网页的方法
2015/07/28 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
区分python中的进程与线程
2020/08/13 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
python中二分查找法的实现方法
2020/12/06 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
网络安全类面试题
2015/08/01 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2014年组织部工作总结
2014/11/14 职场文书
综合素质评价自我评价
2015/03/06 职场文书
员工加薪申请报告
2015/05/15 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
党员身份证明材料
2015/06/19 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers