Einfaches JavaScript-Array in kommagetrennte Liste umwandeln?

Ich habe ein eindimensionales Array von Strings in JavaScript, das ich gerne in eine kommagetrennte Liste umwandeln würde. Gibt es einen einfachen Weg in Garten-Vielfalt JavaScript (oder jQuery), um das in eine kommagetrennte Liste zu verwandeln? (Ich weiß, wie man durch das Array iteriert und die Zeichenfolge selbst durch Verkettung erstellt, wenn dies der einzige Weg ist.)

319
toString() : Wenn Sie nach dem einfachsten Weg suchen, ist es besser, toString() so zu verwenden: var arr = ["Zero", "One" "Zwei"]; console.log (arr.toString ()); mit dem Ergebnis Null, Eins, Zwei Lesen Sie mehr
hinzugefügt der Autor Mohammad lm71, Quelle

14 Antworten

Die Methode Array.prototype.join() :

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

var arr = ["Zero", "One", "Two"];

document.write(arr.join(", "));
</div> </div>
603
hinzugefügt
@ davewilliams459: Aber du bist nicht der OP? Op sagte "ein eindimensionales Array von Strings". Saiten. Keine IDs. Das bedeutet, dass sie alles sein könnten. Was bedeutet, dass sie andere Kommas enthalten können.
hinzugefügt der Autor mpen, Quelle
@bostit Solange Sie sicher sind, wird es nie erscheinen, ja, das ist eine einfache Lösung. Ich denke nur, dass es zumindest in der Antwort erwähnt werden sollte.
hinzugefügt der Autor mpen, Quelle
@Chris: Ich glaube nicht, dass ich verpflichtet bin, eine Alternative anzubieten, nur um die Fehler in einer anderen Lösung aufzuzeigen. Trotzdem habe ich .
hinzugefügt der Autor mpen, Quelle
@Wayne: Ich denke immer noch, dass eine Warnung in Ordnung ist :) Die Leute denken diese Dinge nicht immer durch, und dann schießen sie sich später selbst in den Fuß.
hinzugefügt der Autor mpen, Quelle
@Mark, Sie könnten die Strings immer mit etwas abgrenzen, das wahrscheinlich nie in ihren Daten erscheinen würde, wie zum Beispiel ";;;".
hinzugefügt der Autor devinbost, Quelle
@Mark - Ihr Kommentar ist absolut gültig (wie andere mit einem Upvote angegeben haben), aber hilfreicher könnte es gewesen sein, die alternative Antwort mit Beispielcode zu liefern?
hinzugefügt der Autor Chris, Quelle
@Mark: Die Antwort ist richtig für die Frage wie gefragt. Alle anderen Anforderungen müssen dem Einzelnen überlassen werden. OP hat nach einer kommagetrennten Liste gefragt, nicht nach einem CSV-Format.
hinzugefügt der Autor Wayne, Quelle
@ Mark: wahr genug, aber ich muss Liste der IDs, keine Chance von Kommas oder andere Sonderzeichen verketten
hinzugefügt der Autor davewilliams459, Quelle

Tatsächlich führt die toString() -Implementierung standardmäßig eine Verknüpfung mit Kommas durch:

var arr = [ 42, 55 ];
var str1 = arr.toString();//Gives you "42,55"
var str2 = String(arr);//Ditto

Ich weiß nicht, ob dies von der JS-Spezifikation vorgeschrieben ist, aber das ist es, was fast alle Browser zu tun scheinen.

80
hinzugefügt
Es gibt auch die kürzere (aber weniger klare) arr + ''
hinzugefügt der Autor Oriol, Quelle
Die Leistung von toString() und join (",") entspricht ungefähr dem Stand vom Apr 2018
hinzugefügt der Autor MattMcKnight, Quelle
Array-Join ist schneller jsperf.com/tostring-join
hinzugefügt der Autor Sameer, Quelle
array.toString führt den Job ohne Leerzeichen nach Komma aus. Mit array.join sind Sie flexibel.
hinzugefügt der Autor jMike, Quelle

Oder (effizienter):

var arr = new Array(3);
arr[0] = "Zero";
arr[1] = "One";
arr[2] = "Two";

document.write(arr);//same as document.write(arr.toString()) in this context

Die toString-Methode eines Arrays gibt beim Aufruf genau das zurück, was Sie brauchen - durch Komma getrennte Liste.

28
hinzugefügt
In den meisten Fällen ist toString tatsächlich langsamer als Array-Join. Lookie hier: jsperf.com/tostring-join
hinzugefügt der Autor Sameer, Quelle

Hier ist eine Implementierung, die ein zweidimensionales Array oder ein Array von Spalten in eine korrekt gematchte CSV-Zeichenfolge konvertiert. Die Funktionen prüfen nicht auf gültige Zeichenfolgen-/Zahleneingabe oder Spaltenanzahl (stellen Sie sicher, dass Ihr Array zu Beginn gültig ist). Die Zellen können Kommas und Anführungszeichen enthalten!

Hier ist ein Skript zum Dekodieren von CSV-Strings .

Hier ist mein Skript zum Codieren von CSV-Strings :

// Example
var csv = new csvWriter();
csv.del = '\t';
csv.enc = "'";

var nullVar;
var testStr = "The comma (,) pipe (|) single quote (') double quote (\") and tab (\t) are commonly used to tabulate data in plain-text formats.";
var testArr = [
    false,
    0,
    nullVar,
   //undefinedVar,
    '',
    {key:'value'},
];

console.log(csv.escapeCol(testStr));
console.log(csv.arrayToRow(testArr));
console.log(csv.arrayToCSV([testArr, testArr, testArr]));

/**
 * Class for creating csv strings
 * Handles multiple data types
 * Objects are cast to Strings
 **/

function csvWriter(del, enc) {
    this.del = del || ',';//CSV Delimiter
    this.enc = enc || '"';//CSV Enclosure

   //Convert Object to CSV column
    this.escapeCol = function (col) {
        if(isNaN(col)) {
           //is not boolean or numeric
            if (!col) {
               //is null or undefined
                col = '';
            } else {
               //is string or object
                col = String(col);
                if (col.length > 0) {
                   //use regex to test for del, enc, \r or \n
                   //if(new RegExp( '[' + this.del + this.enc + '\r\n]' ).test(col)) {

                   //escape inline enclosure
                    col = col.split( this.enc ).join( this.enc + this.enc );

                   //wrap with enclosure
                    col = this.enc + col + this.enc;
                }
            }
        }
        return col;
    };

   //Convert an Array of columns into an escaped CSV row
    this.arrayToRow = function (arr) {
        var arr2 = arr.slice(0);

        var i, ii = arr2.length;
        for(i = 0; i < ii; i++) {
            arr2[i] = this.escapeCol(arr2[i]);
        }
        return arr2.join(this.del);
    };

   //Convert a two-dimensional Array into an escaped multi-row CSV 
    this.arrayToCSV = function (arr) {
        var arr2 = arr.slice(0);

        var i, ii = arr2.length;
        for(i = 0; i < ii; i++) {
            arr2[i] = this.arrayToRow(arr2[i]);
        }
        return arr2.join("\r\n");
    };
}
13
hinzugefügt

Ich denke, das sollte es tun:

var arr = ['contains,comma', 3.14, 'contains"quote', "more'quotes"]
var item, i;
var line = [];

for (i = 0; i < arr.length; ++i) {
    item = arr[i];
    if (item.indexOf && (item.indexOf(',') !== -1 || item.indexOf('"') !== -1)) {
        item = '"' + item.replace(/"/g, '""') + '"';
    }
    line.push(item);
}

document.getElementById('out').innerHTML = line.join(',');

Geige

Im Grunde prüft es nur, ob die Zeichenfolge ein Komma oder ein Zitat enthält. Wenn dies der Fall ist, verdoppelt es alle Anführungszeichen und setzt Anführungszeichen an den Enden. Dann verbindet es jeden der Teile mit einem Komma.

10
hinzugefügt
@JoshuaBurns wikipedia sagt, doppelte Anführungszeichen sollten mit einem anderen Zitat geflutet werden, aber es gibt kein formeller Standard. Wenn Ihr CSV-Reader etwas anderes benötigt, können Sie ihn ändern und/oder ablehnen;)
hinzugefügt der Autor mpen, Quelle
Neinoooooooo! Verloren zu werden. Was wäre, wenn die Anführungszeichen mit Backslashes maskiert werden sollten ?! Sie müssen variabel sein. ;)
hinzugefügt der Autor Joshua Burns, Quelle
Tatsächlich gibt es eine RFC, tools.ietf.org/rfc/rfc4180.txt , und das ist richtig, doppelte Anführungszeichen sollten mit doppelten Anführungszeichen versehen werden.
hinzugefügt der Autor Steve Buzonas, Quelle
@SteveBuzonas, du hast gerade diesen Typen mit deinem RFC gepackt.
hinzugefügt der Autor devinbost, Quelle

Verwenden Sie die integrierte Array.toString -Methode

var arr = ['one', 'two', 'three'];
arr.toString(); //'one,two,three'

MDN auf Array.toString()

6
hinzugefügt

Normalerweise finde ich etwas, das auch den Wert überspringt, wenn dieser Wert null oder undefined usw. ist.

Also hier ist die Lösung, die für mich funktioniert:

// Example 1
const arr1 = ['apple', null, 'banana', '', undefined, 'pear'];
const commaSeparated1 = arr1.filter(item => item).join(', ');
console.log(commaSeparated1);//'apple, banana, pear'

// Example 2
const arr2 = [null, 'apple'];
const commaSeparated2 = arr2.filter(item => item).join(', ');
console.log(commaSeparated2);//'apple'

Die meisten Lösungen hier würden ', apple' zurückgeben, wenn mein Array wie das in meinem zweiten Beispiel aussehen würde. Deshalb bevorzuge ich diese Lösung.

3
hinzugefügt

Wenn Sie "und" anstelle von "," zwischen den beiden letzten Elementen verwenden müssen, können Sie Folgendes tun:

function arrayToList(array){
  return array
    .join(", ")
    .replace(/, ((?:.(?!, ))+)$/, ' and $1');
}
3
hinzugefügt

Es gibt viele Methoden, um ein Array in eine kommagetrennte Liste zu konvertieren

1. Verwenden von Array # Join

From MDN

Die join() -Methode verbindet alle Elemente eines Arrays (oder ein Array-artiges Objekt) zu einer Zeichenkette.

Der Code

var arr = ["this","is","a","comma","separated","list"];
arr = arr.join(",");

Ausschnitt

<div class="Ausschnitt" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="Ausschnitt-code Ausschnitt-currently-hidden">

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = arr.join(",");
console.log(arr);
</div> </div>

2. Verwenden von Array # toString

From MDN

Die Methode toString() gibt eine Zeichenfolge zurück, die das angegebene Array und seine Elemente darstellt.

Der Code

var arr = ["this","is","a","comma","separated","list"];
arr = arr.toString();

Ausschnitt

<div class="Ausschnitt" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="Ausschnitt-code Ausschnitt-currently-hidden">

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = arr.toString();
console.log(arr);
</div> </div>

3. Fügen Sie [] + vor dem Array oder + [] nach einem Array hinzu

Das [] + oder + [] wandelt es in eine Zeichenfolge um

Beweis

([]+[] === [].toString())

will output true

<div class="Ausschnitt" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="Ausschnitt-code Ausschnitt-currently-hidden">

console.log([]+[] === [].toString());
</div> </div>
var arr = ["this","is","a","comma","separated","list"];
arr = []+arr;

Ausschnitt

<div class="Ausschnitt" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="Ausschnitt-code Ausschnitt-currently-hidden">

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = []+arr;
console.log(arr);
</div> </div>

Ebenfalls

var arr = ["this","is","a","comma","separated","list"];
arr = arr+[];

<div class="Ausschnitt" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="Ausschnitt-code Ausschnitt-currently-hidden">

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = arr + [];
console.log(arr);
</div> </div>
2
hinzugefügt
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s);//=> Zero,One,Two
1
hinzugefügt
Während dieses Code-Snippet die Frage möglicherweise löst, hilft einschließlich einer Erklärung wirklich, die Qualität zu verbessern von deinem Beitrag. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, und diese Leute könnten die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch nicht, Ihren Code mit erklärenden Kommentaren zu füllen, dies reduziert die Lesbarkeit sowohl des Codes als auch der Erklärungen!
hinzugefügt der Autor kayess, Quelle

Den ursprünglichen Code nehmen:

var arr = new Array(3);
arr[0] = "Zero";
arr[1] = "One";
arr[2] = "Two";

Die erste Antwort auf die Join-Funktion ist ideal. Eine Sache zu berücksichtigen wäre die ultimative Verwendung der Zeichenfolge.

Für die Verwendung in einem Ende Textanzeige:

arr.join(",")
=> "Zero,One,Two"

Für die Verwendung in einer URL, um mehrere Werte (etwas) RESTful zu übergeben:

arr.join("|")
=> "Zero|One|Two"

var url = 'http://www.yoursitehere.com/do/something/to/' + arr.join("|");
=> "http://www.yoursitehere.com/do/something/to/Zero|One|Two"

Natürlich hängt alles von der endgültigen Verwendung ab. Behalten Sie einfach die Datenquelle und den Verwendungszweck im Auge und alles wird mit der Welt in Einklang gebracht.

1
hinzugefügt

Willst du es mit einem "und" beenden?

Für diese Situation habe ich ein npm-Modul erstellt.

Versuchen Sie arrford :


Verwendung

const arrford = require('arrford');

arrford(['run', 'climb', 'jump!']);
//=> 'run, climb, and jump!'

arrford(['run', 'climb', 'jump!'], false);
//=> 'run, climb and jump!'

arrford(['run', 'climb!']);
//=> 'run and climb!'

arrford(['run!']);
//=> 'run!'


Installieren

npm Installieren --save arrford


Weiterlesen

https://github.com/dawsonbotsford/arrford


Versuch es selber

Tonic-Link

1
hinzugefügt
var arr = ["Pro1", "Pro2", "Pro3"];
console.log(arr.join());// Pro1,Pro2,Pro3
console.log(arr.join(', '));// Pro1, Pro2, Pro3
0
hinzugefügt

Papa Parse (browser based) handles commas in values and other edge cases. Use Baby Parse for Node.

Z.B. (Knoten)

const csvParser = require('babyparse');
var arr = [1,null,"a,b"] ;
var csv = csvParser.unparse([arr]) ;
console.log(csv) ;

1 , "a, b"

0
hinzugefügt
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.