Maneira fácil de transformar a matriz JavaScript em lista separada por vírgula?


403

Eu tenho uma matriz unidimensional de strings em JavaScript que 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írgula? (Eu sei como percorrer a matriz e construir a cadeia de caracteres por concatenação, se esse for o único caminho.)


2
toString () : Se você está procurando a maneira mais simples é melhor usar toString () como este: var arr = ["Zero", "One", "Two"]; console.log(arr.toString());que retorna Zero,One,Two Leia mais
Mohammad Musavi

Respostas:


784

O método Array.prototype.join () :

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

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


2
@ Marcos: É verdade, mas eu preciso lista concatenate de IDs, sem chance de vírgulas ou outros caracteres especiais
davewilliams459

11
@ davewilliams459: Mas você não é o OP? Op disse "uma matriz unidimensional de cordas". Cordas. Não IDs. Isso implica que eles poderiam ser qualquer coisa. O que significa que eles podem conter outras vírgulas.
MPEN

22
@ 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. O OP solicitou uma lista separada por vírgula, não um formato do tipo CSV citado.
1011 Wayne

10
@Wayne: Eu ainda acho que um aviso está em ordem :) As pessoas nem sempre pensam nessas coisas, e depois se atiram no pé depois.
MPEN

13
@ Mark - seu comentário é perfeitamente válido (como outros indicaram com um voto positivo), mas pode ter sido mais útil fornecer a resposta alternativa com código de exemplo?
8264 Chris

94

Na verdade, a toString()implementação 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

Não sei se isso é obrigatório pela especificação JS, mas é isso que a maioria praticamente todos os navegadores parecem estar fazendo.


11
Há também o mais curto (mas menos claro)arr + ''
Oriol

array.toString faz o trabalho sem espaço após vírgula. Com array.join você é flexível.
Jmike

3
desempenho de toString()e join(",")é aproximadamente equivalente a partir de abr de 2018
MattMcKnight

29

Ou (com mais eficiência):

var arr = nova matriz (3);
arr [0] = "Zero";
arr [1] = "Um";
arr [2] = "Dois";

document.write (arr); // mesmo que document.write (arr.toString ()) neste contexto

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


2
Na maioria dos casos, o toString é realmente mais lento que a junção da matriz. Veja aqui: jsperf.com/tostring-join
Sameer Alibhai

13

Aqui está uma implementação que converte uma matriz bidimensional ou uma matriz de colunas em uma sequência CSV com escape apropriado. As funções não verificam se há entrada válida de seqüência / número ou contagem de colunas (verifique se sua matriz é válida para começar). As células podem conter vírgulas e aspas!

Aqui está um script para decodificar seqüências de caracteres CSV .

Aqui está o meu script para codificar seqüências de caracteres 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");
    };
}

11

Eu acho que isso deve fazer:

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 sequência contém uma vírgula ou aspas. Caso isso aconteça, dobra todas as aspas e coloca aspas nas extremidades. Em seguida, une cada uma das partes com uma vírgula.


2
Noooooooooo! Tentado a voto negativo. E se as aspas deveriam ser escapadas com barras invertidas ?! Eles precisam ser variáveis. ;)
Joshua Burns

11
A @JoshuaBurns wikipedia diz que aspas duplas devem ser escapadas com outra, mas não há um padrão formal. Se o seu leitor de CSV exigir algo diferente, sinta-se à vontade para modificar e / ou
reduzir o voto

5
Na verdade, existe uma RFC, tools.ietf.org/rfc/rfc4180.txt , e isso está correto entre aspas duplas e deve ser escapado com aspas duplas.
Steve Buzonas

2
@ SteveBuzonas, você acabou de colocar aquele cara com o seu RFC.
Devinbost

9

Se você precisar usar "e" em vez de "," entre os dois últimos itens, poderá fazer isso:

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

9

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

1. Usando array # join

Do MDN

O método join () junta todos os elementos de uma matriz (ou objeto semelhante a matriz) em uma sequência.

O código

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

Snippet

2. Usando o array # toString

Do MDN

O método toString () retorna uma sequência que representa a matriz especificada e seus elementos.

O código

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

Snippet

3. Adicione [] + antes da matriz ou + [] após uma matriz

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

Prova

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

produzirá true

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

Snippet

Além disso

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



3

Normalmente, me pego precisando de algo que também ignore o valor se esse valor for nullou undefinedetc.

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 minha matriz se parecesse com a do meu segundo exemplo. Por isso prefiro esta solução.


2

Gostei da solução em https://jsfiddle.net/rwone/qJUh2/ porque adiciona espaços após vírgulas:

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

Ou, como sugerido por @StackOverflaw nos comentários:

array.join(', ');

11
em uma chamada arr.join(', '):, que na verdade é mais rápida (de acordo com os comentários do @Sameer) e também mais segura (não mexe com vírgulas dentro dos valores da matriz, como seria o RegExp na sequência resultante). ;)
Overflaw das ações 29/08/18

@StockOverflaw Muito melhor. Menos código para fazer a mesma coisa, mais seguro e mais rápido. Obrigado.
Jaime Montoya

2

O Papa Parse lida com vírgulas em valores e outros casos extremos.

( Bebê Parse para Node foi descontinuado - agora você pode usar o Papa Parse no navegador e no Node.)

Por exemplo. (nó)

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"


1

Tomando o código inicial:

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

A resposta inicial do uso da 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 uma URL para passar vários valores 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"

Obviamente, tudo depende do uso final. Apenas mantenha a fonte de dados e use-a em mente e tudo ficará bem com o mundo.


1

Deseja 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 install --save arrford


consulte Mais informação

https://github.com/dawsonbotsford/arrford


Tente você mesmo

Link tônico


1

No Chrome 72 , é possível usar o 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"

Observe que esse caminho está em um estágio muito anterior; portanto, a partir da data de publicação desta resposta, espere incompatibilidade com versões mais antigas do Chrome e de outros navegadores.


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

0
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s); // => Zero,One,Two

11
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código. Tente também não sobrecarregar seu código com comentários explicativos, pois isso reduz a legibilidade do código e das explicações!
kayess

0

Essa solução também remove valores como " ":

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

console.log(result); // => foo, bar
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.