Un moyen facile de transformer un tableau JavaScript en liste séparée par des virgules?

403

J'ai un tableau unidimensionnel de chaînes en JavaScript que je voudrais transformer en une liste séparée par des virgules. Existe-t-il un moyen simple dans JavaScript de type jardin (ou jQuery) de transformer cela en une liste séparée par des virgules? (Je sais comment parcourir le tableau et créer la chaîne moi-même par concaténation si c'est le seul moyen.)

Herbe Caudill
la source
2
toString () : Si vous cherchez le moyen le plus simple, il vaut mieux utiliser toString () comme ceci: var arr = ["Zero", "One", "Two"]; console.log(arr.toString());qui retourne Zero,One,Two Lire la suite
Mohammad Musavi

Réponses:

784

La méthode Array.prototype.join () :

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

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

Wayne
la source
2
@Mark: c'est vrai, mais je dois concaténer la liste des identifiants, aucune chance de virgule ou d'autres caractères spéciaux
davewilliams459
11
@ davewilliams459: Mais vous n'êtes pas l'OP? Op a dit "un tableau unidimensionnel de chaînes". Cordes. Pas des identifiants. Cela implique qu'ils pourraient être n'importe quoi. Ce qui signifie qu'ils peuvent contenir d'autres virgules.
mpen
22
@Mark: La réponse est correcte pour la question posée. Toute autre exigence est laissée à l'individu de travailler pour lui-même. OP a demandé une liste séparée par des virgules, pas un format de type CSV cité.
Wayne
10
@Wayne: Je pense toujours qu'un avertissement s'impose :) Les gens ne réfléchissent pas toujours à ces choses, puis ils se tirent une balle dans le pied plus tard.
mpen
13
@Mark - votre commentaire est parfaitement valide (comme d'autres l'ont indiqué avec un vote positif), mais aurait-il été plus utile de fournir la réponse alternative avec un exemple de code?
Chris
94

En fait, l' toString()implémentation fait une jointure avec des virgules par défaut:

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

Je ne sais pas si cela est mandaté par la spécification JS mais c'est ce que plus à peu près tous les navigateurs semblent le faire.

Ates Goral
la source
1
Il y a aussi le plus court (mais moins clair)arr + ''
Oriol
array.toString fait le travail sans espace après une virgule. Avec array.join, vous êtes flexible.
jMike
3
performances toString()et join(",")sont à peu près équivalentes en avril 2018
MattMcKnight
29

Ou (plus efficacement):

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

document.write (arr); // identique à document.write (arr.toString ()) dans ce contexte

La méthode toString d'un tableau, lorsqu'elle est appelée, renvoie exactement ce dont vous avez besoin - une liste séparée par des virgules.

Sergey Ilinsky
la source
2
Dans la plupart des cas, toString est en fait plus lent que la jointure de tableau. Regardez ici: jsperf.com/tostring-join
Sameer Alibhai
13

Voici une implémentation qui convertit un tableau à deux dimensions ou un tableau de colonnes en une chaîne CSV correctement échappée. Les fonctions ne vérifient pas l'entrée de chaîne / nombre valide ou le nombre de colonnes (assurez-vous que votre tableau est valide pour commencer). Les cellules peuvent contenir des virgules et des guillemets!

Voici un script pour décoder les chaînes CSV .

Voici mon script pour encoder des chaînes 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
la source
11

Je pense que cela devrait le faire:

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

violon

Fondamentalement, il ne fait que vérifier si la chaîne contient une virgule ou une citation. Si c'est le cas, il double toutes les guillemets et place des guillemets aux extrémités. Il joint ensuite chacune des parties par une virgule.

mpen
la source
2
Noooooooooo! Tenté de voter contre. Et si les guillemets devaient être échappés avec des barres obliques inversées?! Ils doivent être variables. ;)
Joshua Burns
1
@JoshuaBurns wikipedia dit que les doubles guillemets devraient être échappés avec une autre citation, mais il n'y a pas de norme formelle. Si votre lecteur CSV nécessite quelque chose de différent, n'hésitez pas à modifier et / ou à voter;)
mpen
5
En fait, il existe un RFC, tools.ietf.org/rfc/rfc4180.txt , et c'est vrai les doubles guillemets doivent être échappés avec des guillemets doubles.
Steve Buzonas
2
@SteveBuzonas, vous venez d'envoyer ce type avec votre RFC.
devinbost
9

Si vous devez utiliser "et" au lieu de "," entre les deux derniers éléments, vous pouvez le faire:

function arrayToList(array){
  return array
    .join(", ")
    .replace(/, ((?:.(?!, ))+)$/, ' and $1');
}
Andrew Downes
la source
9

Il existe de nombreuses méthodes pour convertir un tableau en liste séparée par des virgules

1. Utilisation de array # join

Depuis MDN

La méthode join () joint tous les éléments d'un tableau (ou d'un objet de type tableau) en une chaîne.

Le code

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

Fragment

2. Utilisation du tableau # toString

Depuis MDN

La méthode toString () renvoie une chaîne représentant le tableau spécifié et ses éléments.

Le code

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

Fragment

3. Ajoutez [] + avant le tableau ou + [] après un tableau

Le [] + ou + [] le convertira en chaîne

Preuve

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

affichera vrai

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

Fragment

Aussi

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

Sagar V
la source
8

Utilisez la Array.toStringméthode intégrée

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

MDN sur Array.toString ()

Avijit Gupta
la source
3

Je me trouve généralement besoin de quelque chose qui saute également la valeur si cette valeur est nullouundefined , etc.

Voici donc la solution qui me convient:

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

La plupart des solutions ici reviendraient ', apple'si mon tableau ressemblait à celui de mon deuxième exemple. C'est pourquoi je préfère cette solution.

savoir
la source
2

J'ai aimé la solution sur https://jsfiddle.net/rwone/qJUh2/ car elle ajoute des espaces après des virgules:

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

Ou, comme suggéré par @StackOverflaw dans les commentaires:

array.join(', ');
Jaime Montoya
la source
1
en un seul appel:, arr.join(', ')qui est en fait plus rapide (selon les commentaires de @Sameer), et aussi plus sûr (ne dérange pas les virgules à l'intérieur des valeurs du tableau comme le ferait le RegExp sur la chaîne résultante). ;)
Stock Overflaw
@StockOverflaw Beaucoup mieux. Moins de code pour faire la même chose, plus sûr et plus rapide. Je vous remercie.
Jaime Montoya
2

Papa Parse gère les virgules dans les valeurs et autres cas marginaux.

( Baby Parse for Node est obsolète - vous pouvez désormais utiliser Papa Parse dans le navigateur et dans Node.)

Par exemple. (nœud)

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"

Bob
la source
1

Prendre le code initial:

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

La réponse initiale de l'utilisation de la fonction de jointure est idéale. Une chose à considérer serait l'utilisation ultime de la chaîne.

Pour une utilisation dans un affichage textuel final:

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

Pour utiliser dans une URL pour transmettre plusieurs valeurs d'une manière (quelque peu) RESTful:

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"

Bien sûr, tout dépend de l'utilisation finale. Gardez simplement à l'esprit la source et l'utilisation des données et tout ira bien avec le monde.

E Roberts
la source
1

Voulez-vous terminer avec un "et"?

Pour cette situation, j'ai créé un module npm.

Essayez arrford :


Usage

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


Installer

npm install --save arrford


Lire la suite

https://github.com/dawsonbotsford/arrford


Essayez-le vous-même

Lien tonique

Dawson B
la source
1

Depuis Chrome 72 , il est possible d'utiliser 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"

Veuillez noter que cette méthode en est à son tout début, donc à la date de publication de cette réponse, attendez-vous à une incompatibilité avec les anciennes versions de Chrome et d'autres navigateurs.

Eliya Cohen
la source
0
var arr = ["Pro1", "Pro2", "Pro3"];
console.log(arr.join());// Pro1,Pro2,Pro3
console.log(arr.join(', '));// Pro1, Pro2, Pro3
Akash
la source
0
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s); // => Zero,One,Two
alejandro
la source
1
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code. Essayez également de ne pas surcharger votre code avec des commentaires explicatifs, cela réduit la lisibilité du code et des explications!
kayess
0

Cette solution supprime également des valeurs telles que " ":

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

console.log(result); // => foo, bar
Yorkshireman
la source