Cara mudah untuk mengubah array JavaScript menjadi daftar yang dipisahkan koma?


403

Saya memiliki serangkaian string dalam JavaScript yang ingin saya ubah menjadi daftar yang dipisahkan koma. Apakah ada cara sederhana dalam JavaScript variasi kebun (atau jQuery) untuk mengubahnya menjadi daftar yang dipisahkan koma? (Saya tahu bagaimana cara mengulang melalui array dan membangun string sendiri dengan penggabungan jika itu satu-satunya cara.)


2
toString () : Jika Anda mencari cara paling sederhana lebih baik menggunakan toString () seperti ini: var arr = ["Zero", "One", "Two"]; console.log(arr.toString());yang mengembalikan Zero,One,Two Baca selengkapnya
Mohammad Musavi

Jawaban:


784

Metode Array.prototype.join () :

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

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


2
@ Mark: cukup benar tetapi saya harus menyatukan daftar ID, tidak ada peluang koma atau karakter khusus lainnya
davewilliams459

11
@ davewilliams459: Tapi Anda bukan OP? Op mengatakan "array string satu dimensi". String. Bukan ID. Itu menyiratkan bahwa mereka bisa menjadi apa saja. Yang berarti mereka dapat mengandung koma lainnya.
mpen

22
@ Mark: Jawabannya benar untuk pertanyaan yang ditanyakan. Persyaratan lain diserahkan kepada individu untuk bekerja sendiri. OP meminta daftar yang dipisahkan koma, bukan format tipe CSV yang dikutip.
Wayne

10
@Wayne: Saya masih berpikir ada peringatan dalam urutan :) Orang tidak selalu memikirkan hal-hal ini, dan kemudian mereka menembak diri mereka sendiri kemudian.
buka

13
@ Mark - komentar Anda benar-benar valid (seperti yang ditunjukkan orang lain dengan upvote) tetapi mungkin lebih bermanfaat dengan memberikan jawaban alternatif dengan kode contoh?
Chris

94

Sebenarnya, toString()implementasi tidak bergabung dengan koma secara default:

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

Saya tidak tahu apakah ini diamanatkan oleh spec JS tetapi ini adalah apa paling cukup banyak yang tampaknya dilakukan semua browser.


1
Ada juga yang lebih pendek (tapi kurang jelas)arr + ''
Oriol

array.toString melakukan pekerjaan tanpa spasi setelah koma. Dengan array.join Anda fleksibel.
jMike

3
kinerja toString()dan join(",")kira-kira setara pada April 2018
MattMcKnight

29

Atau (lebih efisien):

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

document.write (arr); // sama seperti document.write (arr.toString ()) dalam konteks ini

Metode toString dari sebuah array ketika dipanggil mengembalikan apa yang Anda butuhkan - daftar yang dipisahkan koma.


2
Dalam kebanyakan kasus, toString sebenarnya lebih lambat daripada array join. Lihat di sini: jsperf.com/tostring-join
Sameer Alibhai

13

Berikut ini adalah implementasi yang mengubah array dua dimensi atau array kolom menjadi string CSV yang lolos dengan benar. Fungsi tidak memeriksa string / angka input atau jumlah kolom yang valid (pastikan array Anda valid untuk memulai). Sel-sel dapat berisi koma dan kutipan!

Berikut ini skrip untuk mendekode string CSV .

Inilah skrip saya untuk menyandikan string 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

Saya pikir ini harus dilakukan:

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

biola

Pada dasarnya yang dilakukan adalah memeriksa apakah string berisi koma atau kutipan. Jika ya, maka menggandakan semua tanda kutip, dan menempatkan tanda kutip di ujungnya. Kemudian ia bergabung dengan masing-masing bagian dengan koma.


2
Tidaaaaaaaak! Tergoda untuk downvote. Bagaimana jika tanda kutip harus lolos dengan garis miring terbalik ?! Mereka harus variabel. ;)
Joshua Burns

1
@JoshuaBurns wikipedia mengatakan kutipan ganda harus diloloskan dengan kutipan lain, tetapi tidak ada standar formal. Jika pembaca CSV Anda memerlukan sesuatu yang berbeda, jangan ragu untuk memodifikasi dan / atau downvote;)
mpen

5
Sebenarnya ada RFC, tools.ietf.org/rfc/rfc4180.txt , dan itu adalah tanda kutip ganda yang benar harus diloloskan dengan tanda kutip ganda.
Steve Buzonas

2
@ SveveBuzonas, Anda baru saja memukul pria itu dengan RFC Anda.
devinbost

9

Jika Anda perlu menggunakan "dan" bukannya "," di antara dua item terakhir, Anda dapat melakukan ini:

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

9

Ada banyak metode untuk mengkonversi array ke daftar yang dipisahkan koma

1. Menggunakan array # gabung

Dari MDN

Metode join () menggabungkan semua elemen array (atau objek mirip array) ke dalam string.

Kode

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

Potongan

2. Menggunakan array # toString

Dari MDN

Metode toString () mengembalikan string yang mewakili array yang ditentukan dan elemen-elemennya.

Kode

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

Potongan

3. Tambahkan [] + sebelum larik atau + [] setelah larik

The [] + atau + [] akan mengubahnya menjadi string

Bukti

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

akan menampilkan true

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

Potongan

Juga

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



3

Saya biasanya menemukan diri saya membutuhkan sesuatu yang juga melewatkan nilai jika nilai itu nullatau undefined, dll.

Jadi, inilah solusi yang cocok untuk saya:

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

Sebagian besar solusi di sini akan kembali ', apple'jika array saya akan terlihat seperti yang ada di contoh kedua saya. Itu sebabnya saya lebih suka solusi ini.


2

Saya menyukai solusinya di https://jsfiddle.net/rwone/qJUh2/ karena menambahkan spasi setelah koma:

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

Atau, seperti yang disarankan oleh @StackOverflaw dalam komentar:

array.join(', ');

1
dalam satu panggilan arr.join(', '):, yang sebenarnya lebih cepat (menurut komentar @Sameer), dan juga lebih aman (tidak mengacaukan dengan koma di dalam nilai array seperti halnya RegExp pada string yang dihasilkan). ;)
Stock Overflaw

@StockOverflaw Jauh lebih baik. Lebih sedikit kode untuk melakukan hal yang sama ditambah lebih aman dan lebih cepat. Terima kasih.
Jaime Montoya

2

Papa Parse menangani koma dalam nilai dan kasus tepi lainnya.

( Baby Parse for Node telah ditinggalkan - Anda sekarang dapat menggunakan Papa Parse di Browser dan di Node.)

Misalnya. (simpul)

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

Mengambil kode awal:

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

Jawaban awal menggunakan fungsi gabungan sangat ideal. Satu hal yang perlu dipertimbangkan adalah penggunaan string yang terbaik.

Untuk digunakan dalam beberapa tampilan teks akhir:

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

Untuk menggunakan URL untuk meneruskan beberapa nilai melalui (agak) dengan tenang:

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"

Tentu saja, itu semua tergantung pada penggunaan akhir. Ingat selalu sumber data dan gunakan dalam pikiran dan semua akan benar dengan dunia.


1

Apakah Anda ingin mengakhirinya dengan "dan"?

Untuk situasi ini, saya membuat modul npm.

Coba arrford :


Pemakaian

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


Install

npm install --save arrford


Baca lebih banyak

https://github.com/dawsonbotsford/arrford


Cobalah sendiri

Tautan tonik


1

Pada Chrome 72 , dimungkinkan untuk menggunakan 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"

Harap perhatikan bahwa cara ini masih dalam tahap yang paling awal, sehingga pada tanggal posting jawaban ini, mengharapkan ketidakcocokan dengan Chrome versi lama dan browser lainnya.


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

1
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda. Tolong juga cobalah untuk tidak membuat kerumunan kode Anda dengan komentar penjelasan, ini mengurangi keterbacaan kode dan penjelasan!
kayess

0

Solusi ini juga menghilangkan nilai-nilai seperti " ":

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

console.log(result); // => foo, bar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.