Maneira fácil de transformar o array JavaScript em uma lista separada por vírgulas?

Eu tenho uma matriz unidimensional de seqüências de caracteres em JavaScript que eu gostaria de transformar em uma lista separada por vírgula. Existe uma maneira simples no JavaScript de variedade de jardim (ou jQuery) para transformar isso em uma lista separada por vírgulas? (Eu sei como percorrer a matriz e construir a cadeia de caracteres por concatenação, se esse é o único caminho.)

319
toString() : Se você está procurando pela maneira mais simples, é melhor usar toString() assim: var arr = ["Zero", "One" , "Dois"]; console.log (arr.toString ()); que retorna Zero, Um, Dois Leia mais
adicionado o autor Mohammad lm71, fonte

14 Respostas

O método 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
adicionado
@ davewilliams459: Mas você não é o OP? Op disse "uma matriz unidimensional de strings". Cordas. Não IDs. Isso implica que eles poderiam ser qualquer coisa. O que significa que eles podem conter outras vírgulas.
adicionado o autor mpen, fonte
@bostIT Enquanto você estiver certo , ele nunca aparecerá, sim, essa é uma solução fácil. Eu só acho que deveria pelo menos ser mencionado na resposta é tudo.
adicionado o autor mpen, fonte
@ Chris: Eu não acho que sou obrigado a fornecer uma alternativa apenas para apontar as falhas em outra solução. No entanto, eu tenho .
adicionado o autor mpen, fonte
@Wayne: Eu ainda acho que um aviso está em ordem :) As pessoas nem sempre pensam nessas coisas, e então elas se atiram no pé mais tarde.
adicionado o autor mpen, fonte
@Mark, você poderia sempre apenas delimitar as strings com algo que provavelmente nunca apareceria em seus dados, como ";;;".
adicionado o autor devinbost, fonte
@Mark - seu comentário é perfeitamente válido (como outros indicaram com um upvote), mas mais útil pode ter sido fornecer a resposta alternativa com código de exemplo?
adicionado o autor Chris, fonte
@Mark: A resposta está correta para a pergunta, conforme solicitado. Quaisquer outros requisitos são deixados para o indivíduo trabalhar por conta própria. OP solicitou uma lista separada por vírgula, não um formato do tipo CSV entre aspas.
adicionado o autor Wayne, fonte
@Mark: verdade, mas eu preciso concatenar lista de IDs, sem chance de vírgulas ou outros caracteres especiais
adicionado o autor davewilliams459, fonte

Na verdade, a implementação de toString() faz uma junção com vírgulas por padrão:

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

Eu não sei se isso é mandado pela especificação JS, mas é isso que mais </div> praticamente todos os navegadores parecem estar fazendo.

80
adicionado
Há também o menor (mas menos claro) arr + ''
adicionado o autor Oriol, fonte
o desempenho de toString() e join (",") é aproximadamente equivalente a partir de abril de 2018
adicionado o autor MattMcKnight, fonte
array join é mais rápido jsperf.com/tostring-join
adicionado o autor Sameer, fonte
array.toString faz o trabalho sem espaço após a vírgula. Com array.join você é flexível.
adicionado o autor jMike, fonte

Ou (mais eficientemente):

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

O método toString de uma matriz quando chamado retorna exatamente o que você precisa - lista separada por vírgulas.

28
adicionado
Na maioria dos casos, toString é realmente mais lento que a junção de array. Lookie aqui: jsperf.com/tostring-join
adicionado o autor Sameer, fonte

Aqui está uma implementação que converte uma matriz bidimensional ou uma matriz de colunas em uma string CSV com escape adequado. As funções não verificam entradas válidas de string/número ou contagens de colunas (certifique-se de que sua matriz seja válida para começar). As células podem conter vírgulas e citações!

Aqui está um script para decodificar strings CSV .

Aqui está o meu script para codificar strings 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");
    };
}
13
adicionado

Eu acho que isso deveria ser feito:

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

violino

Basicamente tudo o que faz é verificar se a string contém uma vírgula ou citação. Em caso afirmativo, ele dobra todas as aspas e coloca aspas nas extremidades. Em seguida, ele une cada uma das partes com uma vírgula.

10
adicionado
@JoshuaBurns wikipedia diz que aspas duplas devem ser ignoradas com outra citação, mas há nenhum padrão formal. Se o seu leitor de CSV precisar de algo diferente, sinta-se à vontade para modificar e/ou diminuir de votos;)
adicionado o autor mpen, fonte
Noooooooooo! Tentado a downvote. E se as cotações devem ser escapadas com barras invertidas ?! Eles precisam ser variáveis. ;)
adicionado o autor Joshua Burns, fonte
Na verdade, existe um RFC, tools.ietf.org/rfc/rfc4180.txt , e isso é correto aspas duplas devem ser escapadas com aspas duplas.
adicionado o autor Steve Buzonas, fonte
@SteveBuzonas, você acabou de encher o cara com o seu RFC.
adicionado o autor devinbost, fonte

Use o método interno Array.toString

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

MDN em Array.toString()

6
adicionado

Eu geralmente me encontro precisando de algo que também pula o valor se esse valor for null ou undefined , etc.

Então aqui está a solução que funciona para mim:

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

A maioria das soluções aqui retornaria ', apple' se meu array fosse parecido com o do meu segundo exemplo. É por isso que eu prefiro essa solução.

3
adicionado

Se você precisar usar "e" em vez de "," entre os dois últimos itens, faça isso:

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

Existem muitos métodos para converter uma matriz em lista separada por vírgulas

1. Usando o array # join

From MDN

O método join() une todos os elementos de uma matriz (ou um objeto semelhante a matriz) em uma string.

O código

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

Snippet

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

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

2. Usando o array # toString

From MDN

O método toString() retorna uma string representando a matriz especificada e seus elementos.

O código

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

Snippet

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

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

3. Adicione [] + antes de array ou + [] depois de um array

O [] + ou + [] irá convertê-lo em uma string

Prova

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

will output true

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

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

Snippet

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

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

Além disso

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

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

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = arr + [];
console.log(arr);
</div> </div>
2
adicionado
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s);//=> Zero,One,Two
1
adicionado
Embora esse snippet de código possa resolver a questão, incluindo uma explicação realmente ajuda a melhorar a qualidade do seu post. Lembre-se de que você está respondendo a pergunta para os leitores no futuro, e essas pessoas podem não saber os motivos da sua sugestão de código. Por favor, tente não aglomerar seu código com comentários explicativos, isso reduz a legibilidade do código e das explicações!
adicionado o autor kayess, fonte

Tomando o código inicial:

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

A resposta inicial de usar a função de junção é ideal. Uma coisa a considerar seria o uso final da string.

Para usar em alguma exibição textual final:

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

Para usar em um URL para passar vários valores através de uma maneira (um pouco) 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"

Claro, tudo depende do uso final. Basta manter a fonte de dados e usar em mente e tudo estará bem com o mundo.

1
adicionado

Você quer terminar com um "e"?

Para essa situação, criei um módulo npm.

Tente arrford :


Uso

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


Instalar

npm Instalar --save arrford


consulte Mais informação

https://github.com/dawsonbotsford/arrford


Tente você mesmo

Link tônico

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

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

Por exemplo. (nó)

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

1 , "a, b"

0
adicionado
JavaScript Brasil OFICIAL
JavaScript Brasil OFICIAL
4 138 dos participantes

Grupo sobre JavaScript do Brasil