Łatwy sposób na przekształcenie tablicy JavaScript w listę oddzieloną przecinkami?

403

Mam jednowymiarową tablicę ciągów w JavaScript, którą chciałbym przekształcić w listę oddzieloną przecinkami. Czy istnieje prosty sposób w JavaScript dla odmian ogrodniczych (lub jQuery), aby zamienić to w listę oddzieloną przecinkami? (Wiem, jak iterować przez tablicę i sam budować ciąg przez konkatenację, jeśli to jedyny sposób.)

Herb Caudill
źródło
2
toString () : Jeśli szukasz najprostszego sposobu, lepiej użyć toString () w ten sposób: var arr = ["Zero", "One", "Two"]; console.log(arr.toString());zwraca wartość Zero,One,Two Czytaj więcej
Mohammad Musavi

Odpowiedzi:

784

Metoda Array.prototype.join () :

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

document.write(arr.join(", "));

Wayne
źródło
2
@Mark: prawda, ale muszę połączyć listę identyfikatorów, bez szans na przecinki lub inne znaki specjalne
davewilliams459
11
@ davewilliams459: Ale nie jesteś OP? Op powiedział „jednowymiarowy układ ciągów znaków”. Smyczki. Nie identyfikatory. Oznacza to, że mogą być kimkolwiek. Co oznacza, że ​​mogą zawierać inne przecinki.
mpen
22
@ Mark: Odpowiedź jest prawidłowa dla zadanego pytania. Wszelkie inne wymagania są pozostawione osobie, która sama sobie wypracuje. OP poprosił o listę oddzieloną przecinkami, a nie cytowany format typu CSV.
Wayne,
10
@Wayne: Nadal uważam, że ostrzeżenie jest w porządku :) Ludzie nie zawsze myślą o tym, a potem strzelają sobie w stopę później.
mpen
13
@Mark - Twój komentarz jest całkowicie poprawny (jak wskazali inni), ale bardziej pomocne może być udzielenie alternatywnej odpowiedzi z przykładowym kodem?
Chris
94

W rzeczywistości toString()implementacja domyślnie łączy się przecinkami:

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

Nie wiem, czy jest to wymagane przez specyfikację JS, ale to jest to większość prawie wszystkie przeglądarki wydają się działać.

Ates Goral
źródło
1
Jest też krótszy (ale mniej wyraźny)arr + ''
Oriol
array.toString wykonuje zadanie bez spacji po przecinku. Dzięki array.join jesteś elastyczny.
jMike
3
wydajność toString()i join(",")jest w przybliżeniu równoważna na kwiecień 2018 r.
MattMcKnight
29

Lub (bardziej efektywnie):

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

document.write (arr); // to samo co document.write (arr.toString ()) w tym kontekście

Wywołana metoda toString tablicy zwraca dokładnie to, czego potrzebujesz - listę oddzieloną przecinkami.

Siergiej Iliński
źródło
2
W większości przypadków toString jest w rzeczywistości wolniejsze niż łączenie tablic. Lookie tutaj: jsperf.com/tostring-join
Sameer Alibhai
13

Oto implementacja, która konwertuje tablicę dwuwymiarową lub tablicę kolumn na poprawnie zmieniony ciąg CSV. Funkcje nie sprawdzają poprawności wprowadzonego ciągu / liczby lub liczby kolumn (upewnij się, że tablica jest poprawna na początek). Komórki mogą zawierać przecinki i cytaty!

Oto skrypt do dekodowania ciągów CSV .

Oto mój skrypt do kodowania ciągów CSV :

// 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");
    };
}
skibulk
źródło
11

Myślę, że powinno to zrobić:

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(',');

skrzypce

Zasadniczo wszystko, co robi, to sprawdzanie, czy ciąg zawiera przecinek lub cudzysłów. Jeśli tak, to podwaja wszystkie cytaty i umieszcza je na końcach. Następnie łączy każdą część przecinkiem.

mpen
źródło
2
Nieeeeeeee! Skusiłem się na głosowanie. Co jeśli cytaty powinny być poprzedzone ukośnikami odwrotnymi ?! Muszą być zmienne. ;)
Joshua Burns
1
@JoshuaBurns wikipedia mówi, że podwójne cudzysłowy powinny być innym cytatem, ale nie ma formalnego standardu. Jeśli Twój czytnik CSV wymaga czegoś innego, nie krępuj się modyfikować i / lub głosować;)
mpen
5
W rzeczywistości istnieje RFC, tools.ietf.org/rfc/rfc4180.txt , i to jest prawidłowe, podwójne cudzysłowy powinny być poprzedzane podwójnymi cudzysłowami.
Steve Buzonas,
2
@ SteveBuzonas, właśnie załatwiłeś tego faceta swoim RFC.
devinbost
9

Jeśli chcesz użyć „i” zamiast „,” pomiędzy dwoma ostatnimi elementami, możesz to zrobić:

function arrayToList(array){
  return array
    .join(", ")
    .replace(/, ((?:.(?!, ))+)$/, ' and $1');
}
Andrew Downes
źródło
9

Istnieje wiele metod konwersji tablicy na listę rozdzielaną przecinkami

1. Za pomocą tablicy # join

Z MDN

Metoda join () łączy wszystkie elementy tablicy (lub obiektu podobnego do tablicy) w ciąg.

Kod

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

Skrawek

2. Używając tablicy # toString

Z MDN

Metoda toString () zwraca łańcuch reprezentujący określoną tablicę i jej elementy.

Kod

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

Skrawek

3. Dodaj [] + przed tablicą lub + [] po tablicy

[] + Lub + [] będzie przekonwertować go na sznurku

Dowód

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

wyświetli true

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

Skrawek

Również

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

Sagar V.
źródło
8

Użyj wbudowanej Array.toStringmetody

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

MDN na Array.toString ()

Avijit Gupta
źródło
3

I zazwyczaj znaleźć samodzielnie wymagające coś również pomija wartość, jeżeli wartość ta jest nulllub undefineditp

Oto rozwiązanie, które działa dla mnie:

// 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'

Większość rozwiązań tutaj powróciłoby, ', apple'gdyby moja tablica wyglądała tak jak w moim drugim przykładzie. Dlatego wolę to rozwiązanie.

knowbody
źródło
2

Podobało mi się rozwiązanie na https://jsfiddle.net/rwone/qJUh2/, ponieważ dodaje spacje po przecinkach:

array = ["test","test2","test3"]
array = array.toString();
array = array.replace(/,/g, ", ");
alert(array);

Lub, jak sugeruje @StackOverflaw w komentarzach:

array.join(', ');
Jaime Montoya
źródło
1
w jednym wywołaniu arr.join(', '):, który jest faktycznie szybszy (zgodnie z komentarzami @Sameer), a także bezpieczniejszy (nie zadziera z przecinkami w wartościach tablicy, tak jak RegExp na wynikowym łańcuchu). ;)
Zapasowy zapas
@StockOverflaw Znacznie lepiej. Mniej kodu do zrobienia tego samego oraz bezpieczniejsze i szybsze. Dziękuję Ci.
Jaime Montoya,
2

Papa Parse obsługuje przecinki w wartościach i innych przypadkach krawędzi.

( Baby Parse dla węzła została wycofana - możesz teraz korzystać z analizy składni w przeglądarce i w węźle).

Na przykład. (węzeł)

const csvParser = require('papaparse'); // previously you might have used babyparse
var arr = [1,null,"a,b"] ;
var csv = csvParser.unparse([arr]) ;
console.log(csv) ;

1 ,, „a, b”

Kok
źródło
1

Biorąc kod początkowy:

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

Wstępna odpowiedź na temat użycia funkcji łączenia jest idealna. Jedną rzeczą do rozważenia byłoby ostateczne użycie ciągu.

Aby użyć w niektórych przypadkach wyświetlania tekstowego:

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

Aby użyć w adresie URL do przekazania wielu wartości w (nieco) RESTful sposób:

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"

Oczywiście wszystko zależy od ostatecznego zastosowania. Pamiętaj tylko o źródle danych i użytkowaniu, a wszystko będzie dobrze ze światem.

E Roberts
źródło
1

Czy chcesz zakończyć to znakiem „i”?

Dla tej sytuacji utworzyłem moduł npm.

Wypróbuj arrford :


Stosowanie

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!'


zainstalować

npm install --save arrford


Czytaj więcej

https://github.com/dawsonbotsford/arrford


Spróbuj sam

Link toniczny

Dawson B.
źródło
1

Od Chrome 72 możliwe jest użycie Intl.ListFormat :

const vehicles = ['Motorcycle', 'Bus', 'Car'];

const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(formatter.format(vehicles));
// expected output: "Motorcycle, Bus, and Car"

const formatter2 = new Intl.ListFormat('de', { style: 'short', type: 'disjunction' });
console.log(formatter2.format(vehicles));
// expected output: "Motorcycle, Bus oder Car"

const formatter3 = new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });
console.log(formatter3.format(vehicles));
// expected output: "Motorcycle Bus Car"

Pamiętaj, że ten sposób jest na bardzo wczesnym etapie, więc od daty opublikowania tej odpowiedzi spodziewaj się niezgodności ze starszymi wersjami Chrome i innymi przeglądarkami.

Eliya Cohen
źródło
0
var arr = ["Pro1", "Pro2", "Pro3"];
console.log(arr.join());// Pro1,Pro2,Pro3
console.log(arr.join(', '));// Pro1, Pro2, Pro3
Akash
źródło
0
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s); // => Zero,One,Two
alejandro
źródło
1
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu. Staraj się również nie tłoczyć kodu objaśniającymi komentarzami, co zmniejsza czytelność zarówno kodu, jak i objaśnień!
kayess
0

To rozwiązanie usuwa również takie wartości, jak " ":

const result = ['', null, 'foo', '  ', undefined, 'bar'].filter(el => {
  return Boolean(el) && el.trim() !== '';
}).join(', ');

console.log(result); // => foo, bar
Yorkshireman
źródło