简单的方法把JavaScript数组变成逗号分隔的列表?

我有一个JavaScript中的一维字符串数组,我想把它转换成一个逗号分隔的列表。在普通JavaScript(或jQuery)中是否有一种简单的方法将其转换为逗号分隔的列表?(我知道如何通过数组迭代,并通过连接自己构建字符串,如果这是唯一的方法。)

573087 次浏览

Array.prototype.join ()方法:

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


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

或者(更有效地):

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

当调用数组的toString方法时,返回的正是您所需要的—逗号分隔的列表。

实际上,toString()实现在默认情况下使用逗号进行连接:

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

我不知道这是否是JS规范要求的,但这是几乎所有浏览器都在做的大多数

下面是将二维数组或列数组转换为正确转义的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");
};
}

我认为这应该做到:

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

< a href = " http://jsfiddle.net/mnbayazit/G9mYj/4/ " >小提琴< / >

基本上,它所做的就是检查字符串是否包含逗号或引号。如果是,那么它将所有的引号都翻倍,并在结尾加上引号。然后用逗号将每个部分连接起来。

取初始代码:

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

使用连接函数的初始答案是理想的。需要考虑的一件事是字符串的最终用途。

用于某些最终文本显示:

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"

当然,这完全取决于最终的用途。只要记住数据源和使用方法,一切都将是正确的。

使用内置的Array.toString方法

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

MDN on Array.toString()

你想以"and"结尾吗?

对于这种情况,我创建了一个npm模块。

试试arrford:

< br >

使用

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

< br >

安装

npm install --save arrford

< br >

阅读更多

https://github.com/dawsonbotsford/arrford

< br >

自己试试吧

音源链接 .

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

如果你需要用“and”代替“”,在最后两项之间,你可以这样做:

function arrayToList(array){
return array
.join(", ")
.replace(/, ((?:.(?!, ))+)$/, ' and $1');
}
var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s); // => Zero,One,Two

我通常发现自己需要一些也跳过值的值,如果该值是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'。这就是为什么我更喜欢这个解决方案。

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

(婴儿解析 for 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、“甲、乙”

有很多方法可以将数组转换为逗号分隔的列表

1. 使用数组#加入

中数

join()方法将数组(或类数组对象)的所有元素连接到一个字符串中。

的代码

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

片段

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

2. 使用数组# toString

中数

toString()方法返回一个表示指定数组及其元素的字符串。

的代码

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

片段

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

3.在数组前添加[]+或在数组后添加+[]

[] ++ []将其转换为字符串

证明

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

将输出真正的

console.log([]+[] === [].toString());

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

片段

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

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

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

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

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

或者,正如@ stackover缺陷在评论中建议的那样:

array.join(', ');

铬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和其他浏览器不兼容。

这个解决方案还删除了诸如" "这样的值:

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


console.log(result); // => foo, bar
const arr = [1, 2, 3];
console.log(`${arr}`)

简单的数组

let simpleArray = [1,2,3,4]
let commaSeperated = simpleArray.join(",");
console.log(commaSeperated);

以逗号分隔的特定属性的对象数组。

let arrayOfObjects = [
{
id : 1,
name : "Name 1",
address : "Address 1"
},
{
id : 2,
name : "Name 2",
address : "Address 2"
},
{
id : 3,
name : "Name 3",
address : "Address 3"
}]
let names = arrayOfObjects.map(x => x.name).join(", ");
console.log(names);

结果

Name 1, Name 2, Name 3

在这里,您可以使用任何char进行分离,也可以仅使用foreach获取任何属性列表

let taskIds: string = '';
this.checkedTaskList.forEach(res => {
taskIds = taskIds + res.taskId.toString() + ','
});
if (taskIds) {
taskIds.substring(0, taskIds.length - 1),**
}

包含分隔符(逗号)的字符串的安全方法

let arr = ["Hello, there", "How's there", 'the "best"']
let csv = arr.map(e => JSON.stringify(e)).join(",")
console.log(csv)

结果

"Hello, there","How's there","the \\"best\\""

如果你有一个对象数组,但想要一个逗号分隔的字符串从对象上的一个属性。

var arr = [
{ Id: 1, Name: 'Item 1' },
{ Id: 2, Name: 'Item 2' },
{ Id: 3, Name: 'Item 3' }
];
var result = arr.map(i => { return i.Name; }).join(', ');
console.log(result); // 'Item 1, Item 2, Item 3'