腳本之家服務器常用軟件

快捷導航

JS字符串拼接的幾種常見方式總結

更新時間：2023年06月28日 18:17:50 作者：D_jing20

最近有經常用到連接字符串的方法,但是對整體的方法比較模糊,這里記錄一下,下面這篇文章主要給大家介紹了關于JS字符串拼接的幾種常見方式,需要的朋友可以參考下

前言
一、使用連接符 “+” 把要連接的字符串連起來
二、使用模板字符串，以反引號（ ` ）標識
三、使用數組的 join() 方法連接字符串
四、使用 JavaScript的 concat() 方法連接字符串
五、使用對象屬性來連接字符串
六、三種方法性能進行比較
補充：javaScript 如何使用js追加字符串呢
總結

前言

在 JavaScript 中，使用字符串連接有幾種方式：連接符（+）、反引號（`）、join()、concat()。

一、使用連接符 “+” 把要連接的字符串連起來

let a = 'java'
let b = a + 'script'
 
//運行結果：javascript

說明：只連接100個以下的字符串建議用這種方法，最方便

二、使用模板字符串，以反引號（ ` ）標識

ES6中新增的字符串方法，可以配合反單引號完成拼接字符串的功能

反單引號怎么打出來：將輸入法調整為英文輸入法，單擊鍵盤上數字鍵1左邊的按鍵。

用法：

1：定義需要拼接進去的字符串變量

2：將字符串變量用${}包起來，再寫到需要拼接的地方

注意：反單引號：` ；單引號：' 。不要用錯了喲~

實例：

let a = 'java'
let b = `hello ${a}script`
 
//運行結果：hello javascript

三、使用數組的 join() 方法連接字符串

定義和用法：

join() 方法將數組作為字符串返回。

元素將由指定的分隔符分隔。默認分隔符是逗號 (,)。

注釋：join() 方法不會改變原始數組。

語法：

array.join(separator)

參數：

參數	描述
separator	可選。要使用的分隔符。如果省略，元素用逗號分隔。

返回值：

類型	描述
String	字符串值，表示數組值，由指定的分隔符分隔。

實例：

let arr = ['hello','java','script']
let str = arr.join(" ")
 
//運行結果：hello java script

join('--') 這個是可以換的換--就是用--拼接

四、使用 JavaScript的 concat() 方法連接字符串

定義和用法：

concat() 方法用于連接兩個或多個字符串。

該方法沒有改變原有字符串，但是會返回連接兩個或多個字符串新字符串。

注釋：concat() 方法不會修改原字符串的值，與數組的 concat() 方法操作相似。

語法：

string.concat(string1, string2, ..., stringX)

參數：

參數	描述
string1, string2, ..., stringX	必需。將被連接為一個字符串的一個或多個字符串對象。

返回值：

類型	描述
String	兩個或多個字符串連接后生成的新字符串。

實例：

let a = 'java'
let b = 'script'
 
let str = a.concat(b)
 
//運行結果：javascript

五、使用對象屬性來連接字符串

function StringConnect(){
    this.arr = []
}
StringConnect.prototype.append = function(str) {
    this.arr.push(str)
}
StringConnect.prototype.toString = function() {
    return this.arr.join("")
}
var mystr = new StringConnect()
mystr.append("abc")
mystr.append("def")
mystr.append("g")
var str = mystr.toString()
console.log(str);
//abcdefg

或

function stringConnect(){
    this._str_=[];
}
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();
    console.log(str);

六、三種方法性能進行比較

利用下面代碼對三種方法性能進行比較，通過更改 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

統(tǒng)計5000000的時候在地址欄加入了隨機參數，應該是避免了緩存的影響的。從結果來看，第一種方法并不比另2種方法消耗多，甚至還更有優(yōu)勢，這點和手冊上的說明明顯不一致。

測試系統(tǒng)：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

補充：javaScript 如何使用js追加字符串呢

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content=""> 
  <title>字符串追加的三種方式分享</title>
  <script>
    //chabaoo.cn
    //字符串追加演示
    var a ="chabaoo.cn";
    //1： 在字符串后面追加一個字符
    //1.1 使用concate函數,在字符串后面追加一個或多個字符
     var b1 = a.concat("-123","-456");
    //1.2 直接使用加號(+)
     var b2 = a+"-456"+"-1234";
    //2.在字符串前面加上一個字符串
       var c1 ="123--"+a;
    //3.在字符串任意位置插入字符串
     //例: 在字符串的第4個字符位置插入123
     var d1 = a.slice(0,4) + "第4位插入的字符串" + a.slice(4)
      var d2 = a.slice(0,5).concat("第5位插入的字符串",a.slice(5))
      document.write(b1);
      document.write("<br />");
      document.write(b2);
       document.write("<br />");
      document.write(c1);
      document.write("<br />");
      document.write(d1);
       document.write("<br />");
      document.write(d2);
  </script>
 </head>
 <body>
 </body>
</html>