¿Forma fácil de convertir la matriz de JavaScript en una lista separada por comas?

Tengo una matriz unidimensional de cadenas en JavaScript que me gustaría convertir en una lista separada por comas. ¿Hay alguna manera simple en JavaScript de variedad de jardín (o jQuery) para convertir eso en una lista separada por comas? (Sé cómo iterar a través de la matriz y construir la cadena yo mismo mediante concatenación si esa es la única forma).

319
toString() : si está buscando la forma más simple, es mejor usar toString() de la siguiente manera: var arr = ["Zero", "One"] , "Dos"]; console.log (arr.toString ()); que devuelve Zero, One, Two Leer más
agregado el autor Mohammad lm71, fuente

14 Respuestas

El 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
agregado
@ davewilliams459: ¿Pero tú no eres el OP? Op dijo "una matriz unidimensional de cadenas". Instrumentos de cuerda. No identificaciones Eso implica que podrían ser cualquier cosa. Lo que significa que pueden contener otras comas.
agregado el autor mpen, fuente
@bostIT Mientras estés seguro nunca aparecerá, sí, es una solución fácil. Creo que al menos debería mencionarse en la respuesta, eso es todo.
agregado el autor mpen, fuente
@Chris: No creo que esté obligado a proporcionar una alternativa solo para señalar los defectos en otra solución. Sin embargo, tengo .
agregado el autor mpen, fuente
@Wayne: Sigo pensando que una advertencia está en orden :) Las personas no siempre piensan en estas cosas, y luego se disparan en el pie más tarde.
agregado el autor mpen, fuente
@Mark, siempre puedes delimitar las cadenas con algo que probablemente nunca aparezca en sus datos, como ";;;".
agregado el autor devinbost, fuente
@Mark: su comentario es perfectamente válido (como otros lo han indicado con un voto a favor) pero podría haber sido más útil proporcionar la respuesta alternativa con un código de ejemplo.
agregado el autor Chris, fuente
@ Mark: la respuesta es correcta para la pregunta tal como se le preguntó. Cualquier otro requisito se deja a la persona para que trabaje por sí misma. OP pidió una lista separada por comas, no un formato de tipo CSV cotizado.
agregado el autor Wayne, fuente
@Mark: es cierto, pero necesito concatenar la lista de ID, sin posibilidad de comas u otros caracteres especiales
agregado el autor davewilliams459, fuente

En realidad, la implementación de toString() se une con comas de forma predeterminada:

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

No sé si esto es obligatorio por las especificaciones de JS, pero esto es lo que casi todos los navegadores parecen estar haciendo.

80
agregado
También existe el arr + '' más corto (pero menos claro)
agregado el autor Oriol, fuente
el rendimiento de toString() y join (",") es más o menos equivalente a partir de abril de 2018
agregado el autor MattMcKnight, fuente
la combinación de matrices es más rápida jsperf.com/tostring-join
agregado el autor Sameer, fuente
array.toString hace el trabajo sin espacio después de la coma. Con array.join eres flexible.
agregado el autor jMike, fuente

O (de manera más eficiente):

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

El método toString de una matriz cuando se llama devuelve exactamente lo que necesita: lista separada por comas.

28
agregado
En la mayoría de los casos, toString es en realidad más lento que array join. Lookie aquí: jsperf.com/tostring-join
agregado el autor Sameer, fuente

Aquí hay una implementación que convierte una matriz bidimensional o una matriz de columnas en una cadena CSV correctamente escapada. Las funciones no verifican la entrada válida de cadena/número o conteos de columnas (asegúrese de que su matriz sea válida para comenzar). ¡Las celdas pueden contener comas y comillas!

Aquí hay un script para decodificar cadenas de CSV .

Aquí está mi script para codificar cadenas de 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
agregado

Creo que esto debería hacerlo:

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

violín

Básicamente, todo lo que hace es verificar si la cadena contiene una coma o una comilla. Si lo hace, duplicará todas las comillas y pondrá comillas en los extremos. Luego une cada una de las partes con una coma.

10
agregado
@JoshuaBurns wikipedia dice que las comillas dobles se deben escapar con otra cita, pero hay sin un estándar formal. Si su lector CSV requiere algo diferente, siéntase libre de modificar y/o votar negativamente;)
agregado el autor mpen, fuente
Noooooooooo! Tentado a downvote. ¿Qué pasa si las comillas se deben escapar con barras diagonales inversas? Necesitan ser variables. ;)
agregado el autor Joshua Burns, fuente
En realidad, hay un RFC, tools.ietf.org/rfc/rfc4180.txt , y eso es correcto, las comillas dobles deben escaparse con comillas dobles.
agregado el autor Steve Buzonas, fuente
@SteveBuzonas, acabas de patear a ese tipo con tu RFC.
agregado el autor devinbost, fuente

Utilice el método incorporado de Array.toString

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

MDN en Array.toString()

6
agregado

Normalmente me encuentro necesitando algo que también omite el valor si ese valor es null o undefined , etc.

Así que aquí está la solución que funciona para mí:

// 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 mayoría de las soluciones aquí devolverían ', apple' si mi matriz se parecería a la de mi segundo ejemplo. Es por eso que prefiero esta solución.

3
agregado

Si necesita usar "y" en lugar de "," entre los dos últimos elementos, puede hacer esto:

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

Hay muchos métodos para convertir una matriz en una lista separada por comas

1. Usando array # join

From MDN

El método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena.

El código

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

Retazo

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

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

2. Usando array # toString

From MDN

El método toString() devuelve una cadena que representa la matriz especificada y sus elementos.

El código

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

Retazo

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

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

3. Agregue [] + antes de la matriz o + [] después de una matriz

El [] + o + [] lo convertirá en una cadena

Prueba

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

will output true

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

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

Retazo

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

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

también

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

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

var arr = ["this", "is", "a", "comma", "separated", "list"];
arr = arr + [];
console.log(arr);
</div> </div>
2
agregado
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s);//=> Zero,One,Two
1
agregado
Si bien este fragmento de código puede resolver la pregunta, incluida una explicación realmente ayuda a mejorar la calidad de tu publicación Recuerde que usted está respondiendo la pregunta a los lectores en el futuro, y es posible que esas personas no sepan los motivos de su sugerencia de código. Por favor, intente no saturar su código con comentarios explicativos, ¡esto reduce la legibilidad tanto del código como de las explicaciones!
agregado el autor kayess, fuente

Tomando el código inicial:

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

La respuesta inicial de usar la función de unión es ideal. Una cosa a considerar sería el uso final de la cuerda.

Para usar en alguna visualización textual final:

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

Para usar en una URL para pasar múltiples valores de una manera (algo) 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"

Por supuesto, todo depende del uso final. Solo tenga en cuenta la fuente de datos y el uso, y todo estará bien con el mundo.

1
agregado

¿Quieres terminar con un "y"?

Para esta situación, creé un módulo npm.

Pruebe 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


Lee mas

https://github.com/dawsonbotsford/arrford


Inténtalo tú mismo

Enlace de Tonic

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

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

P.ej. (nodo)

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

1, "a, b"

0
agregado
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com