將 JavaScript 數組轉換為逗號分隔列表的簡單方法？

Question

我在 JavaScript 中有一個一維字符串數組，我想將其轉換為以逗號分隔的列表。 花園品種 JavaScript（或 jQuery）中是否有一種簡單的方法可以將其轉換為以逗號分隔的列表？ （如果這是唯一的方法，我知道如何遍歷數組並通過連接自己構建字符串。）

Answer 1

Array.prototype.join()方法：

 var arr = ["Zero", "One", "Two"]; document.write(arr.join(", "));

Answer 2

實際上， toString()實現默認使用逗號進行連接：

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

我不知道這是否是 JS 規范規定的，但這就是最多幾乎所有的瀏覽器似乎都在做。

Answer 3

或者（更有效地）：

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 方法在調用時會返回您需要的內容 - 逗號分隔的列表。

Answer 4

簡單數組

 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

Answer 5

如果您需要在最后兩項之間使用“和”而不是“,”，您可以這樣做：

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

Answer 6

這是一個將二維數組或列數組轉換為正確轉義的 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");
    };
}

Answer 7

我認為應該這樣做：

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

小提琴

基本上它所做的只是檢查字符串是否包含逗號或引號。 如果是這樣，那么它將所有引號加倍，並將引號放在末尾。 然后它用逗號連接每個部分。

Answer 8

有很多方法可以將數組轉換為逗號分隔的列表

1.使用數組#join

來自MDN

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

來自MDN

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);

Answer 9

使用內置的Array.toString方法

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

Array.toString() 上的 MDN

Answer 10

如果該值為null或undefined等，我通常會發現自己需要一些也跳過該值的東西。

所以這是適合我的解決方案：

// 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' 。 這就是為什么我更喜歡這個解決方案。

Answer 11

const arr = [1, 2, 3];
console.log(`${arr}`)

Answer 12

Papa Parse處理值和其他極端情況中的逗號。

（Node 的Baby Parse已被棄用 - 您現在可以在瀏覽器和 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"

Answer 13

我喜歡https://jsfiddle.net/rwone/qJUh2/上的解決方案，因為它在逗號后添加了空格：

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

或者，正如@StackOverflaw 在評論中所建議的那樣：

array.join(', ');

Answer 14

從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 和其他瀏覽器不兼容。

Answer 15

在這里，您可以使用任何字符分隔，並且可以僅使用 foreach 獲取任何屬性列表

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

Answer 16

獲取初始代碼：

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"

當然，這一切都取決於最終用途。 只要牢記數據源和使用，一切都會好起來的。

Answer 17

你想用“和”結束它嗎？

針對這種情況，我創建了一個 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

自己試試

補品鏈接

Answer 18

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

Answer 19

var array = ["Zero", "One", "Two"];
var s = array + [];
console.log(s); // => Zero,One,Two

Answer 20

此解決方案還刪除了諸如" "類的值：

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

console.log(result); // => foo, bar

Answer 21

包含分隔符（逗號）的字符串的安全方法

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\\""

Answer 22

如果您有一個對象數組，但想要來自 object 上的一個屬性的逗號分隔字符串。

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'