将JavaScript数组转换成逗号分隔列表的简单方法?


403

我有一个一维的JavaScript字符串数组,我想将其转换为以逗号分隔的列表。是否可以使用多种花园的JavaScript(或jQuery)将其转换为以逗号分隔的列表的简单方法?(如果这是唯一的方法,我知道如何遍历数组并自己通过串联构建字符串。)


2
toString():如果您正在寻找最简单的方法,最好像这样使用toString()var arr = ["Zero", "One", "Two"]; console.log(arr.toString());返回Zero,One,Two 更多信息
Mohammad Musavi

Answers:


784

所述Array.prototype.join()方法:

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

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


2
@Mark:足够真实,但是我需要连接ID列表,没有逗号或其他特殊字符的可能性
davewilliams459 2012年

11
@ davewilliams459:但是你不是OP吗?Op说“一维字符串数组”。字符串。不是ID。这意味着它们可以是任何东西。这意味着它们可能包含其他逗号。
mpen 2012年

22
@Mark:答案正确无误。其他任何要求留给个人自己解决。OP要求使用逗号分隔的列表,而不是引用的CSV类型的格式。
韦恩

10
@Wayne:我仍然认为应该发出警告:)人们并不总是认为这些事情会发生,然后他们在脚下开枪。
mpen 2012年

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 2015年

array.toString的工作是在逗号后没有空格。使用array.join可以使您变得灵活。
jMike

3
的性能,toString()并且join(",")大致等效于2018
MattMcKnight 18'Apr

29

或者(更有效地):

var arr = new Array(3);
arr [0] =“零”;
arr [1] =“一个”;
arr [2] =“两个”;

document.write(arr); //在这种情况下与document.write(arr.toString())相同

调用时,数组的toString方法将完全返回您需要的内容-逗号分隔的列表。


2
在大多数情况下,toString实际上比数组连接要慢。此处的Lookie:jsperf.com/tostring-join
Sameer Alibhai

13

这是将二维数组或列数组转换为正确转义的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
不!试图拒绝投票。如果引号应使用反斜杠转义怎么办?它们需要可变。;)
Joshua Burns

1
@JoshuaBurns 维基百科说,双引号应该换成另一个引号,但是没有正式的标准。如果您的CSV阅读器要求使用其他内容,请随时进行修改和/或
下注

5
其实有一个RFC,tools.ietf.org / rfc / rfc4180.txt,这是正确的双引号应该用双引号转义。
Steve Buzonas 2014年

2
@SteveBuzonas,您只是用RFC来打包那个家伙。
devinbost 2014年

9

如果您需要在最后两项之间使用“和”而不是“,”,则可以执行以下操作:

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

我通常会发现自己需要一些可以跳过该值(如果该值为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

我喜欢https://jsfiddle.net/rwone/qJUh2/上的解决方案,因为它在逗号后添加了空格:

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

或者,如@StackOverflaw在评论中所建议:

array.join(', ');

1
在一个调用中:arr.join(', '),它实际上更快(根据@Sameer注释),而且更安全(不会像结果字符串上的RegExp那样弄乱数组值内的逗号)。;)
Overflaw

@StockOverflaw更好。更少的代码即可完成同一操作,而且更加安全,快捷。谢谢。
Jaime Montoya '18

2

爸爸解析 处理值和其他边缘情况中的逗号。

婴儿解析不建议使用Node的您现在可以在浏览器和Node中使用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";

使用join函数的最初答案是理想的。要考虑的一件事是字符串的最终使用。

为了在某​​些文本显示中使用:

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

您是否要以“和”结尾?

对于这种情况,我创建了一个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

Chrome 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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.