溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript中怎么組合拼接字符串

發(fā)布時(shí)間：2021-07-02 14:25:05 來(lái)源：億速云 閱讀：180 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)JavaScript中怎么組合拼接字符串，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

JavaScript組合拼接字符串的效率。在腳本開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)按照某個(gè)規(guī)則，組合拼接出一個(gè)大字符串進(jìn)行輸出。比如寫(xiě)腳本控件時(shí)控制整個(gè)控件的外觀的HTML標(biāo)簽輸出，比如AJAX里得到服務(wù)器端的回傳值后動(dòng)態(tài)分析創(chuàng)建HTML標(biāo)簽時(shí)，不過(guò)這里我就不討論拼接字符串的具體應(yīng)用了，我只是想在這里討論一下拼接的效率。

字符串的拼接在我們寫(xiě)代碼的時(shí)候都是用“+=”這個(gè)運(yùn)算符，s += String; 這是我們最為熟知的寫(xiě)法，不知道大家有沒(méi)有注意過(guò)沒(méi)有，在組合的字符串容量有幾十K甚至幾百K的時(shí)候，腳本執(zhí)行起來(lái)很慢，CPU使用率狂高，例如：

var str = "01234567891123456789212345678931234567894123456789";  str+= "51234567896123456789712345678981234567899123456789/n";  var result = "";  for(var i=0; i<2000; i++) result += str;

就這么一步操作，產(chǎn)生的結(jié)果字符串是200K，耗時(shí)是1.1秒（這個(gè)與電腦配置有關(guān)），CPU的峰值100%。（為了更直觀地看到效果，我多做了些循環(huán)）?？上攵瓦@么一步操作就消耗了我一秒多的時(shí)間，再加上其它的代碼的時(shí)間消耗，那整個(gè)腳本塊的執(zhí)行時(shí)間就難以忍受了。那有沒(méi)有優(yōu)化的方案呢？還有其它的方法嗎？答案當(dāng)然是有的，否則我寫(xiě)這篇文章就是廢話。

更快的方式就是使用數(shù)組，在循環(huán)拼接的時(shí)候不是相接拼接到某個(gè)字符串里去，而是把字符串放到一個(gè)數(shù)組里，***用數(shù)組.join("") 得到結(jié)果字符串，代碼示例：

var str = "01234567891123456789212345678931234567894123456789";  str+= "51234567896123456789712345678981234567899123456789/n";  var result = "", a = new Array();  for(var i=0; i<2000; i++) a[i] = str;  result = a.join(""); a = null;

大家可以測(cè)試測(cè)試，組合出一個(gè)相同大小的字符串所消耗的時(shí)間，我這里測(cè)試出來(lái)的結(jié)果是：<15毫秒，請(qǐng)注意，它的單位是毫秒，也就是說(shuō)組合出這么一個(gè)200K的字符串，兩種模式的時(shí)間消耗是差不多兩個(gè)數(shù)量級(jí)。這意味著什么？意味著后者已經(jīng)工作結(jié)束吃完中飯回來(lái)，前者還在做著苦力。我寫(xiě)一個(gè)測(cè)試頁(yè)面，大家可以把下面這些代碼拷貝下來(lái)另存為一個(gè)HTM文件在網(wǎng)頁(yè)里打開(kāi)自己來(lái)測(cè)試一下兩者之間的效率差，反正我測(cè)試的是前者要半分鐘才能完成的事，后者0.07秒就搞定了（循環(huán)10000次）。

<body>  字符串拼接次數(shù)<input id="totle" value="1000" size="5" maxlength="5">  <input type="button" value="字符串拼接法" onclick="method1()">  <input type="button" value="數(shù)組賦值join法" onclick="method2()"><br>  <div id="method1">&nbsp;</div>  <div id="method2">&nbsp;</div>  <textarea id="show" style="width: 100%; height: 400"></textarea>  <SCRIPT LANGUAGE="JavaScript">  <!--  //這個(gè)被拼接的字符串長(zhǎng)是100字節(jié) author: meizz  var str = "01234567891123456789212345678931234567894123456789";  str+= "51234567896123456789712345678981234567899123456789/n";

方法一

function method1()  {  var result = "";  var totle = parseInt(document.getElementById("totle").value);  var n = new Date().getTime();  for(var i=0; i<totle; i++)  {  result += str;  }  document.getElementById("show").value = result;  var s = "字符串拼接法：拼接后的大字符串長(zhǎng) "+ result.length +"字節(jié)，"+  "拼接耗時(shí) "+ (new Date().getTime()-n) +"毫秒！";  document.getElementById("method1").innerHTML = s;  }

方法二

function method2()  {  var result = "";  var totle = parseInt(document.getElementById("totle").value);  var n = new Date().getTime();  var a = new Array();  for(var i=0; i<totle; i++)  {  a[i] = str;  }  result = a.join(""); a=null;  document.getElementById("show").value = result;  var s = "數(shù)組賦值join法：拼接后的大字符串長(zhǎng) "+ result.length +"字節(jié)，"+  "拼接耗時(shí) "+ (new Date().getTime()-n) +"毫秒！";  document.getElementById("method2").innerHTML = s;  }  //-->  </SCRIPT>

***我再說(shuō)幾句，是不是以后字符串拼接就一律使用數(shù)組join呢？這個(gè)要看你的實(shí)際需求了，就普通的幾個(gè)或者K級(jí)的字節(jié)的組合就沒(méi)有必要使用數(shù)組法了，因?yàn)殚_(kāi)數(shù)組變量也是有消耗的。若有幾K以上的字符串組合，那就是數(shù)組的效率高了。

IE 6.0:

字符串拼接法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 22089毫秒！

數(shù)組賦值join法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 218毫秒！

Firefox 1.0:

字符串拼接法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 1044毫秒！

數(shù)組賦值join法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 1044毫秒！

Mozilla 1.7:

字符串拼接法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 1045毫秒！

數(shù)組賦值join法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 1044毫秒！

Netscape 7.0:

字符串拼接法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 10273毫秒！

數(shù)組賦值join法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 1138毫秒！

Opera 7.54:

字符串拼接法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 6968毫秒！

數(shù)組賦值join法：拼接后的大字符串長(zhǎng) 1010000字節(jié)，拼接耗時(shí) 6922毫秒！

循環(huán)10000次的測(cè)試結(jié)果表明在IE和Netscape里可以大大提高效率，而在Firefox Mozilla Opera 里兩種方法耗時(shí)基本相近，這些數(shù)據(jù)足可以判定數(shù)組join法優(yōu)于傳統(tǒng)字符串拼接。

看完上述內(nèi)容，你們對(duì)JavaScript中怎么組合拼接字符串有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手