浅谈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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
js轮播图代码分享
Jul 14 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
angular 服务随记小结
May 06 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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
十天学会php之第十天
2006/10/09 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
诉讼代理人授权委托书
2014/04/08 职场文书
艺术教育实施方案
2014/05/03 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
离婚纠纷代理词
2015/05/23 职场文书
法律服务所工作总结
2015/08/10 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers