浅谈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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
12306验证码破解思路分享
Mar 25 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
JS错误处理与调试操作实例分析
Apr 13 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的MySQL连接类
2013/06/07 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
深入了解Node.js中的一些特性
2014/09/25 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
代码讲解Python对Windows服务进行监控
2018/02/11 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
自我鉴定范文200字
2013/10/02 职场文书
中秋晚会活动方案
2014/08/31 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
详解Vue router路由
2021/11/20 Vue.js