如何在 JavaScript 中連接數組中的字符串

數據有多種形式——列表是一種非常常見的形式。連接字符串是一項常見任務，有多種方法可以解決。

以同樣的方式，在 array 中連接字符串 建立在該任務的基礎上，對於該數組中的每個字符串。但是，我們可以使用另一種非常有用的方法 - join() 這種方法可以輕鬆、無縫地自動化這個過程。

Array.prototype.join()

將數組中的所有元素附加到一個數組中的最簡單方法是 join() Array的方法 班級。它使用給定的可選分隔符將所有元素連接成一個字符串。

如果您省略分隔符 - 它設置為逗號 (, ):

let platonicSolids = ['Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron'];

let joinedWithDefaultDelimiter = platonicSolids.join();
let joinedWithDelimiter = platonicSolids.join('');
let joinedWithUnderscore = platonicSolids.join('_');
    
console.log(joinedWithDefaultDelimiter);
console.log(joinedWithDelimiter);
console.log(joinedWithUnderscore);

這導致：

Tetrahedron,Cube,Octahedron,Dodecahedron,Icosahedron
TetrahedronCubeOctahedronDodecahedronIcosahedron
Tetrahedron_Cube_Octahedron_Dodecahedron_Icosahedron

這是一個偉大的 從 CSV 文件的對象創建條目的方法 - 讓我們定義一個包含幾個字段和 join() 的簡單對象 將其轉換為 CSV 格式的字符串：

const book = {genre:"Popular Science", name:"Our Mathematical Universe", author:"Max Tegmark"};

let csvString = Object.keys(book).map(field => book[field]).join();

console.log(csvString);

這樣，我們可以輕鬆地將 JavaScript 對象轉換為 CSV 格式的字符串，並將其字段值連接在一起：

Popular Science,Our Mathematical Universe,Max Tegmark

String.concat()

concat() 函數很簡單——它連接兩個字符串。給定一個條目數組，我們可以簡單地循環遍歷它和 concat() 每個條目到一個空字符串並返回它：

let platonicSolids = ['Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron'];
let result = '';

for (let i = 0; i < platonicSolids.length; i++) {
    result = result.concat(platonicSolids[i]);
}

console.log(result);

請記住，字符串是不可變的，我們必須分配 concat() 的結果 操作返回一個引用變量。

這導致：

TetrahedronCubeOctahedronDodecahedronIcosahedron

您也可以在此處添加任何分隔符，只需在循環中連接它並檢查最後一個元素：

let platonicSolids = ['Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron'];
let result = '';

for (let i = 0; i < platonicSolids.length; i++) {
    result = result.concat(platonicSolids[i]);
    if (i < platonicSolids.length - 1) {
        result = result.concat(",");
    }
}

console.log(result);

這導致：

Tetrahedron,Cube,Octahedron,Dodecahedron,Icosahedron

+ 運算符

當然，如果你可以 concat() 字符串在一起，您也可以通過 + 附加它們 運營商：

let platonicSolids = ['Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron'];
let result = '';

for (let i = 0; i < platonicSolids.length; i++) {
    result = result + platonicSolids[i];
}

console.log(result);

甚至更好 - 您可以使用簡寫 += 運算符：

result += platonicSolids[i];

這也導致：

TetrahedronCubeOctahedronDodecahedronIcosahedron

性能基準

那麼，哪種方法是最好的性能方面 ? join() 方法絕對是最容易使用且看起來最乾淨的方法，但是對於大型語料庫，它是不是性能最高的方法？

首先，讓我們創建一個生成隨機字符串的函數 對我們來說：

function generateStrings(num) {
    let array = [];
    for (let i = 0; i < num; i++) {
        array.push((Math.random() + 1).toString(36).substring(2);
        }
        return array;
    }
}

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

該函數生成一個隨機數，將其轉換為基數為 36 的字符串 並用 substring() 修剪字符串開頭的剩餘數字 .雖然這種方法對字符串生成有限制 - 它可以很好地處理多達 50.000 個元素，並且在那時它們將是相當隨機的。

注意： 請記住，此方法對於隨機數而言不是加密安全的，並且它僅用於說明目的，以繞過我們在迭代同一字符串的許多實例時遇到的固有緩存優化，以確保基準是準確的。

讓我們測試一下：

let stringArray = generateStrings(5);
console.log(stringArray)

這導致：

[ 'e8e3mbqczk', '2wqjp9hko', 'szazekngkv', 'xsxl2bvh3w', 'd4vadxk9ny' ]

驚人的！讓我們生成 25.000 個字符串並使用我們的方法將它們連接起來：

let stringArray = generateStrings(25000);

console.time('Concatenating with Operator');
let join1 = plusOperator(stringArray);
console.timeEnd('Concatenating with Operator');

console.time('Concatenating with concat()');
let join2 = concat(stringArray);
console.timeEnd('Concatenating with concat()');

console.time('Concatenating with join()');
let join3 = stringArray.join('');
console.timeEnd('Concatenating with join()');


function generateStrings(num) {
    let array = [];
    for (let i = 0; i < num; i++) {
        array.push((Math.random() + 1).toString(36).substring(2));
    }
    return array;
}

function plusOperator(array) {
    let result = '';
    for (let i = 0; i < array.length; i++) {
        result += array[i];
    }
    return result;
}

function concat(array) {
    let result = '';
    for (let i = 0; i < array.length; i++) {
        result = result.concat(array[i]);
    }
    return result;
}

一旦它們被生成並加入 - 這些是結果：

Concatenating with Operator: 3.417ms
Concatenating with concat(): 2.879ms
Concatenating with join(): 8.930ms

如果您正在處理大 數據數量，join() 方法優於自定義實現，很大程度上是因為 先天 分隔符邏輯。即使您不想實際添加分隔符，您實際上也添加了一個空字符，這在大型數組上會花費額外的時間。

如果我們要在自定義方法中重新添加分隔符：

function plusOperator(array) {
    let result = '';
    for (let i = 0; i < array.length; i++) {
        result += array[i];
        if (i < array.length - 1) {
            result += ',';
        }
    }
    return result;
}

function concat(array) {
    let result = '';
    for (let i = 0; i < array.length; i++) {
        result = result.concat(array[i]);
        if (i < array.length - 1) {
            result = result.concat(',');
        }
    }
    return result;
}

我們的結果會大不相同：

Concatenating with Operator: 3.914ms
Concatenating with concat(): 23.988ms
Concatenating with join(): 3.452ms

運算符的執行速度比 join() 慢一點 方法和 concat() 方法變成了真的 與這兩種方法相比都很慢。

還值得注意的是 MDN 的官方聲明，關於使用 concat() 連接字符串的性能優勢 方法或運算符是：

不過這個完全不用hold，可以輕鬆搞定concat() 優於 + 運營商：

console.time('Concatenating with Operator');
concatWithOperator();
console.timeEnd('Concatenating with Operator');

console.time('Concatenating with Function');
concatWithFunction();
console.timeEnd('Concatenating with Function');

function concatWithOperator() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result += i;
    }
}

function concatWithFunction() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result = result.concat(i);
    }
}

這導致：

Concatenating with Operator: 1.921ms
Concatenating with Function: 0.855ms

您的瀏覽器、它的版本以及它使用的優化器可能因機器而異，而這些屬性確實會影響性能。

測試並驗證您自己的代碼 而不是從表面上接受建議。並非所有機器和環境都是相同的，在一台機器上效果很好，在另一台機器上可能效果不佳。

結論

在本指南中，我們詳細介紹了將字符串列表連接成單個字符串的不同方法，無論有無定界符。

我們已經了解了常見的 join() 方法，以及我們自己實現的兩種方法，以在不需要分隔符時提高性能。

最後，我們對它們進行了基準測試以比較它們的性能。