溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript如何組合拼接字符串”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript如何組合拼接字符串”文章能幫助大家解決問題。
JavaScript組合拼接字符串的效率。在腳本開發過程中，經常會按照某個規則，組合拼接出一個大字符串進行輸出。比如寫腳本控件時控制整個控件的外觀的HTML標簽輸出，比如AJAX里得到服務器端的回傳值后動態分析創建HTML標簽時，不過這里我就不討論拼接字符串的具體應用了，我只是想在這里討論一下拼接的效率。
字符串的拼接在我們寫代碼的時候都是用“+=”這個運算符，s += String; 這是我們最為熟知的寫法，不知道大家有沒有注意過沒有，在組合的字符串容量有幾十K甚至幾百K的時候，腳本執行起來很慢，CPU使用率狂高，例如：
var str = "01234567891123456789212345678931234567894123456789"; str+= "51234567896123456789712345678981234567899123456789/n"; var result = ""; for(var i=0; i<2000; i++) result += str;
就這么一步操作，產生的結果字符串是200K，耗時是1.1秒（這個與電腦配置有關），CPU的峰值100%。（為了更直觀地看到效果，我多做了些循環）。可想而知就這么一步操作就消耗了我一秒多的時間，再加上其它的代碼的時間消耗，那整個腳本塊的執行時間就難以忍受了。那有沒有優化的方案呢？還有其它的方法嗎？答案當然是有的，否則我寫這篇文章就是廢話。
更快的方式就是使用數組，在循環拼接的時候不是相接拼接到某個字符串里去，而是把字符串放到一個數組里，***用數組.join("") 得到結果字符串，代碼示例：
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;大家可以測試測試，組合出一個相同大小的字符串所消耗的時間，我這里測試出來的結果是：<15毫秒，請注意，它的單位是毫秒，也就是說組合出這么一個200K的字符串，兩種模式的時間消耗是差不多兩個數量級。這意味著什么？意味著后者已經工作結束吃完中飯回來，前者還在做著苦力。我寫一個測試頁面，大家可以把下面這些代碼拷貝下來另存為一個HTM文件在網頁里打開自己來測試一下兩者之間的效率差，反正我測試的是前者要半分鐘才能完成的事，后者0.07秒就搞定了（循環10000次）。
<body> 字符串拼接次數<input id="totle" value="1000" size="5" maxlength="5"> <input type="button" value="字符串拼接法" onclick="method1()"> <input type="button" value="數組賦值join法" onclick="method2()"><br> <div id="method1"> </div> <div id="method2"> </div> <textarea id="show" style="width: 100%; height: 400"></textarea> <SCRIPT LANGUAGE="JavaScript"> <!-- //這個被拼接的字符串長是100字節 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 = "字符串拼接法：拼接后的大字符串長 "+ result.length +"字節，"+ "拼接耗時 "+ (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 = "數組賦值join法：拼接后的大字符串長 "+ result.length +"字節，"+ "拼接耗時 "+ (new Date().getTime()-n) +"毫秒！"; document.getElementById("method2").innerHTML = s; } //--> </SCRIPT>***我再說幾句，是不是以后字符串拼接就一律使用數組join呢？這個要看你的實際需求了，就普通的幾個或者K級的字節的組合就沒有必要使用數組法了，因為開數組變量也是有消耗的。若有幾K以上的字符串組合，那就是數組的效率高了。
IE 6.0:
字符串拼接法：拼接后的大字符串長 1010000字節，拼接耗時 22089毫秒！
數組賦值join法：拼接后的大字符串長 1010000字節，拼接耗時 218毫秒！
Firefox 1.0:
字符串拼接法：拼接后的大字符串長 1010000字節，拼接耗時 1044毫秒！
數組賦值join法：拼接后的大字符串長 1010000字節，拼接耗時 1044毫秒！
Mozilla 1.7:
字符串拼接法：拼接后的大字符串長 1010000字節，拼接耗時 1045毫秒！
數組賦值join法：拼接后的大字符串長 1010000字節，拼接耗時 1044毫秒！
Netscape 7.0:
字符串拼接法：拼接后的大字符串長 1010000字節，拼接耗時 10273毫秒！
數組賦值join法：拼接后的大字符串長 1010000字節，拼接耗時 1138毫秒！
Opera 7.54:
字符串拼接法：拼接后的大字符串長 1010000字節，拼接耗時 6968毫秒！
數組賦值join法：拼接后的大字符串長 1010000字節，拼接耗時 6922毫秒！
循環10000次的測試結果表明在IE和Netscape里可以大大提高效率，而在Firefox Mozilla Opera 里兩種方法耗時基本相近，這些
關于“JavaScript如何組合拼接字符串”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
