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

工作中经常会碰到要把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中的三种字符串连接方式及其性能比较就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现的用来对比两个用指定分隔符分割的字符串是否相同

    比较2个字符串内元素的不同(字符1, 字符2, 分隔符可选) 文件: diff.js // 示例用法 /* var str1 = "tie, mao, 55"; var str2 = "tie, mao, csdn"; var result = diff(str1, str2, ','); // 对象 var rs = "" + result; // " 55, csdn" var df1 = result.diff1; //

  • js去字符串前后空格5种实现方法及比较

    我们在项目中如果写到注册的时候,用户输入空格,我们怎么来剔除空格呢? 下面是我经常用到的js与大家分享下: 第一种:循环检查替换 [javascript] 复制代码 代码如下: //供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String("

  • js处理json以及字符串的比较等常用操作

    js处理json以及字符串的比较等常用操作

    js处理json格式的插入.修改.删除,以及字符串的比较等常用操作 demo 1: json格式的插入.删除 复制代码 代码如下: <html> <head> <title></title> <script language="javascript"> function change(){ var obj=document.getElementById("floor"); if (document.getE

  • js字符串截取函数slice、substring和substr的比较

    在js中字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧. 取字符串的三个函数:slice(start,[end]),substring(start,[end])和substr(start,[length]) 相关属性: slice() 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若

  • javascript中比较字符串是否相等的方法

    网上看了很多,比如==.equals都不行 还是外国网站给力,发现了方法. http://stackoverflow.com/questions/2167602/optimum-way-to-compare-strings-in-javascript用string_a.localeCompare(string_b) 方法去做:它会返回3个值0:字符串相等-1:字符串string_a<string_b.1:字符串string_a>string_b大家以后就可以使用正确的方法比较字符串了.

  • javascript 两个字符串比较函数

    Untitled function diff(){ var s = f.s1.value; var s1 = f.s2.value; document.write("s: " + s + ""); document.write("s1: " + s1 + ""); function sort(s, a){ for(i=0; i list1[n]){ l[j] = list1[n]; if (n [Ctrl+A 全选 注:如需引

  • JavaScript 解析Json字符串的性能比较分析代码

    JavaScript 解析Json字符串的性能比较分析代码

    解析时用到的方法一般是eval或者new function,而目前IE8和Firefox3.1又内置了原生的JSON对象(据说会有一定的性能提升).那我们在实际使用的时候怎样从这三种方法(因为性能问题,不考虑用javascript实现的解析)里面来选择呢?面对众多的浏览器,哪种方式的性能是最好的呢? 一.测试方法 1.首先指定测试次数及JSON字符串 复制代码 代码如下: var count = 10000, o = null, i = 0, jsonString = '{"value"

  • javascript的字符串按引用复制和传递,按值来比较介绍与应用

    按值和按引用的比较 Numbers 和 Boolean 类型的值 (true 和 false) 是按值来复制.传递和比较的.当按值复制或传递时,将在计算机内存中分配一块空间并将原值复制到其中.然后,即使更改原来的值,也不会影响所复制的值(反过来也一样),因为这两个值是独立的实体. 对象.数组以及函数是按引用来复制.传递和比较的. 当按地址复制或传递时,实际是创建一个指向原始项的指针,然后就像拷贝一样来使用该指针.如果随后更改原始项,则将同时更改原始项和复制项(反过来也一样).实际上只有一个实体:

  • JS实现快速比较两个字符串中包含有相同数字的方法

    本文实例讲述了JS实现快速比较两个字符串中包含有相同数字的方法.分享给大家供大家参考,具体如下: 有两个字符串: $a = "5,8,0"; $b = "8,0,5"; 怎样快速比较这两个字符串包含的数字是相同的,其中分隔符都是相同的,只是数字的排序不一样,两个字符串长度是一样的 js代码: 方法一: var s1 = "5,0,8"; var s2 = "8,0,5"; if(s1.split(",").

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

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • Javascript三种字符串连接方式及性能比较

    第一种:用连接符"+"连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以数组作为中介,使用jion函数进行连接 var arr=new Array(); arr.push(a); arr.push(b); var str=arr.join(""); 第三种:利用对象属性连接字符串 function stringConnect(){ this

  • 浅谈javascript中的三种弹窗

    js中三种弹窗 1)alert 弹出警告 无返回值---------alert('第一行\n第二行'); 2)confirm()选择确定或取消,返回t或f----var result = confirm('是否删除!'); 3)prompt()弹出输入框,返回输入内容----var value = prompt('输入你的名字:', '请在这里输入名字'); 当然也可以自定义好看的样式.下面代码有问题明天再改. <script> //window.confirm //prompt window

  • 浅谈Hibernate中的三种数据状态(临时、持久、游离)

    1.临时态(瞬时态) 不存在于session中,也不存在于数据库中的数据,被称为临时态. 比如:刚刚使用new关键字创建出的对象. 2.持久态 存在于session中,事务还未提交,提交之后最终会进入数据库的数据,被称为持久态. 比如:刚刚使用session.save()操作的对象. 3.游离态(脱管态) 存在于数据库中,但不存在于session中的数据,被称为游离态. 比如:使用了session.save(),并且事务已经提交之后,对象进入数据库,就变成了游离态. 以上这篇浅谈Hibernat

  • 浅谈Laravel中的三种中间件的作用

    在之前一直简单的认为中间件就是往middleware里添加中间件即可.现在才知道中间件有三种类型,分别为:$middleware $middlewareGroup $routeMiddleware 通过查阅资料,终于明白了这三种类型的作用和不同. 第一种,全局中间件/$middleware: 我们的每一次请求,这里面的每个中间件都会执行. 第二种,路由中间件/$routeMiddleware: 定义在该属性内的中间件,只能在定义路由的时候引用. 假设这是我们定义的路由中间件: protected

  • 浅谈JS中逗号运算符的用法

    注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

  • 浅谈js中对象的使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; //此对象中的author属性的值还是一个对象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //创建一个空对象和{}一样 var o4=new Object(); //给对象增加name属性 o4.name='JS' 上面使用了两

  • 浅谈js中的attributes和Attribute的用法与区别

    一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属性捆绑一个值: createAttribute:仅建立一个属性: removeAttribute:删除一个属性: getAttributeNode:获取一个节点作为对象: setAttributeNode:建立一个节点: removeAttributeNode:删除一个节点: 1.getAttrib

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

随机推荐