JavaScript配列をカンマ区切りのリストに変換する簡単な方法は?


403

JavaScriptに文字列の1次元配列があり、コンマ区切りのリストに変換したいのですが。garden-variety JavaScript(またはjQuery)にカンマ区切りのリストに変換する簡単な方法はありますか?(それが唯一の方法である場合、配列を反復処理し、連結によって文字列を自分で構築する方法を知っています。)


2
toString() :あなたはそれが使用することをお勧めします最も簡単な方法を探している場合はtoString()を次のように:var arr = ["Zero", "One", "Two"]; console.log(arr.toString());返すZero,One,Two もっと読むを
モハンマド・ムーサビ

回答:


784

Array.prototype.join()メソッド:

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

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


2
@マーク:真実ですが、IDのリストを連結する必要があります。カンマやその他の特殊文字の可能性はありません
davewilliams459

11
@ davewilliams459:しかし、あなたはOPではありませんか?Opは「文字列の1次元配列」と述べました。文字列。IDではありません。それは彼らが何でもあり得ることを意味します。つまり、他のコンマが含まれている可能性があります。
mpen

22
@マーク:質問に対する答えは、質問どおりに正しいです。その他の要件は、自分で解決するために個人に任されています。OPは、引用符で囲まれたCSVタイプの形式ではなく、コンマ区切りのリストを要求しました。
ウェイン、

10
@ウェイン:私はまだ警告が正しいと思います:)人々はいつもこれらのことを熟考しているわけではなく、彼らは後で自分の足で撃ちます。
mpen

13
@Mark-あなたのコメントは完全に有効ですが(他の人が賛成投票で示したように)、実際に別の答えをサンプルコードで提供する方が便利だったのではないでしょうか?
Chris

94

実際には、toString()実装はデフォルトでカンマによる結合を行います:

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

これがJS仕様で義務付けられているかどうかはわかりませんが、これは 最も ほとんどすべてのブラウザが実行しているようです。


1
短い(ただし、あまり明確ではない)arr + ''
Oriol

array.toStringは、コンマの後にスペースなしでジョブを実行します。array.joinを使用すると、柔軟性があります。
jMike

3
2018toString()join(",")
MattMcKnight

29

または(より効率的に):

var arr = new Array(3);
arr [0] = "ゼロ";
arr [1] = "1つ";
arr [2] = "2つ";

document.write(arr); //このコンテキストではdocument.write(arr.toString())と同じ

配列のtoStringメソッドが呼び出されると、必要なものが正確に返されます-コンマ区切りリスト。


2
ほとんどの場合、toStringは実際には配列結合よりも低速です。こちらのルックアップ
Sameer Alibhai

13

2次元配列または列の配列を適切にエスケープされたCSV文字列に変換する実装は次のとおりです。関数は、有効な文字列/数値の入力または列数をチェックしません(配列が最初から有効であることを確認してください)。セルにはカンマと引用符を含めることができます!

CSV文字列をデコードするためのスクリプトは次のとおりです。

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

私はこれでうまくいくと思います:

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

バイオリン

基本的には、文字列にカンマまたは引用符が含まれているかどうかをチェックするだけです。含まれている場合は、すべての引用符を2倍にし、引用符を両端に付けます。次に、各部分をコンマで結合します。


2
やったー!反対票を投じる誘惑。引用符をバックスラッシュでエスケープする必要がある場合はどうなりますか?!それらは可変である必要があります。;)
ジョシュアバーンズ

1
@JoshuaBurns ウィキペディアは、二重引用符は別の引用符でエスケープする必要があると述べていますが、正式な標準はありません。CSVリーダーで別のものが必要な場合は、自由に変更したり、投票を行ったりしてください;)
mpen '24

5
実際にはRFC。to​​ols.ietf.org/rfc/rfc4180.txtがあり、これは正しい二重引用符を二重引用符でエスケープする必要があります。
Steve Buzonas 14年

2
@SteveBuzonas、あなたはあなたのRFCでその男を突き出しただけです。
devinbost 2014

9

「」の代わりに「および」を使用する必要がある場合、最後の2つの項目間でこれを行うことができます。

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

9

配列をコンマ区切りのリストに変換する方法はたくさんあります

1. array#joinを使用する

MDNから

join()メソッドは、配列(または配列のようなオブジェクト)のすべての要素を文字列に結合します。

コード

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

スニペット

2. array#toStringを使用する

MDNから

toString()メソッドは、指定された配列とその要素を表す文字列を返します。

コード

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

スニペット

3.配列の前に[] +を追加するか、配列の後に+ []を追加します

[] +または+ []の文字列に変換します

証明

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

trueを出力します

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

スニペット

また

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



3

I通常、その値であれば自分にも値をスキップし、何かを必要と見つけるnullundefined、など

だからここに私のために働く解決策があります:

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

ここでのほとんどの解決策は、', apple'私の配列が2番目の例の配列のようになった場合に返されます。それが私がこの解決策を好む理由です。


2

コンマの後にスペースを追加するため、https://jsfiddle.net/rwone/qJUh2/の解決策が気に入りました。

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

または、コメントの@StackOverflawで提案されているように:

array.join(', ');

1
1回の呼び出しで:arr.join(', ')、これは実際に高速で(@Sameerコメントによる)、安全でもあります(結果の文字列のRegExpのように、配列値内のコンマを混乱させません)。;)
2018

@StockOverflaw方が良い。同じことを行うためのコードが少なく、安全で高速です。ありがとうございました。
Jaime Montoya、

2

Papa Parse は、値やその他のエッジケースでコンマを処理します。

(NodeのBaby Parseは非推奨になりました-これで、ブラウザーとノードでPapa Parseを使用できます。)

例えば。(ノード)

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

最初のコードを取る:

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

結合関数を使用する最初の答えは理想的です。考慮すべき1つのことは、文字列の最終的な使用です。

一部のテキスト表示で使用する場合:

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

URLで複数の値を(やや)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"

もちろん、それはすべて最終的な用途に依存します。データソースと使用を念頭に置いておくだけで、すべてが世界で正しくなります。


1

「and」で終了しますか?

この状況では、npmモジュールを作成しました。

arrfordを試してください:


使用法

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


インストール

npm install --save arrford


続きを読む

https://github.com/dawsonbotsford/arrford


自分で試してみてください

トニックリンク


1

のとしてクロム72、それを使用することが可能です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"

この方法は非常に初期の段階であるため、この回答の投稿日現在、Chromeの古いバージョンや他のブラウザとの非互換性を期待しています。


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
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の質を高めるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。また、コードと説明コメントを混同しないようにしてください。これにより、コードと説明の両方が読みにくくなります。
kayess

0

このソリューションでは、" "次のような値も削除されます。

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

console.log(result); // => foo, bar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.