浅谈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下利用fso判断文件是否存在的代码
Dec 11 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 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
session 的生命周期是多长
2006/10/09 PHP
PHP4实际应用经验篇(5)
2006/10/09 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python障碍式期权定价公式
2019/07/19 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
如何在Python中创建二叉树
2021/03/30 Python
python中subplot大小的设置步骤
2021/06/28 Python
Python读写yaml文件
2022/03/20 Python