Простий спосіб перетворити масив JavaScript в список, розділений комами?


403

У JavaScript є одновимірний масив рядків у JavaScript, який я хотів би перетворити на список, розділений комами. Чи існує простий спосіб у JavaScript-сорті JavaScript (або jQuery) перетворити його у список, розділений комами? (Я знаю, як перебирати масив і будувати рядок самостійно шляхом конкатенації, якщо це єдиний спосіб.)


2
toString () : Якщо ви шукаєте найпростіший спосіб, то краще скористатися toString () таким чином: var arr = ["Zero", "One", "Two"]; console.log(arr.toString());який повертається Zero,One,Two Детальніше
Mohammad Musavi

Відповіді:


784

Метод Array.prototype.join () :

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

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


2
@Mark: досить правда, але мені потрібно зв'язати список ідентифікаторів, жодних шансів коми чи інших спеціальних символів
davewilliams459

11
@ davewilliams459: Але ти не ОП? Оп сказав "одновимірний масив рядків". Струни. Не ідентифікатори. Це означає, що вони можуть бути будь-якими. Що означає, що вони можуть містити інші коми.
квітня 1212

22
@Mark: відповідь правильна на запитання, як було задано. Будь-які інші вимоги залишаються перед людиною для розробки для себе. ОП запитувало список, розділений комами, а не формат CSV-типу.
Уейн

10
@Wayne: Я все ще думаю, що попередження є в порядку :) Люди не завжди все обдумують, а потім пізніше стріляють у ногу.
квітня 12

13
@Mark - ваш коментар цілком справедливий (як це показали інші із заявою), але кориснішим може бути насправді надання альтернативної відповіді з прикладом коду?
Кріс

94

Насправді toString()реалізація робить з'єднання з комами за замовчуванням:

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

Я не знаю, чи це доручено спец. JS, але це те, що найбільше майже всі браузери, здається, роблять.


1
Є і коротший (але менш зрозумілий)arr + ''
Оріол

array.toString виконує завдання без місця після коми. З array.join ви гнучкі.
jMike

3
продуктивність toString()та join(",")приблизно еквівалентна станом на квітень 2018
MattMcKnight

29

Або (ефективніше):

var arr = новий масив (3);
arr [0] = "Нуль";
arr [1] = "Один";
arr [2] = "Два";

document.write (arr); // те саме, що document.write (arr.toString ()) у цьому контексті

Метод toString масиву при виклику повертає саме те, що вам потрібно - список, розділений комами.


2
У більшості випадків toString насправді повільніше, ніж приєднання масиву. Дивіться тут: 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
Noooooooooo! Піддався спокусі. Що робити, якщо цитати повинні бути усунені з накидами ?! Вони повинні бути змінними. ;)
Джошуа Бернс

1
Вікіпедія @JoshuaBurns говорить, що подвійні цитати слід уникати з іншою цитатою, але офіційного стандарту немає. Якщо читач CSV вимагає що - то інше, НЕ соромтеся змінювати і / або downvote;)
mpen

5
Насправді є RFC, tools.ietf.org/rfc/rfc4180.txt , і це правильне використання подвійних лапок з подвійними лапками.
Стів Бузонас

2
@SteveBuzonas, ти просто зав'язав цього хлопця своїм RFC.
devinbost

9

Якщо вам потрібно використовувати "та" замість "," між останніми двома елементами, ви можете зробити це:

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

9

Існує багато методів перетворення масиву в розділений комами список

1. Використання масиву # приєднання

Від MDN

Метод join () об'єднує всі елементи масиву (або об’єкт, схожий на масив) у рядок.

Код

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

Знімок

2. Використання масиву # toString

Від MDN

Метод toString () повертає рядок, що представляє вказаний масив та його елементи.

Код

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

Знімок

3. Додайте [] + перед масивом або + [] після масиву

[] + Або + [] буде перетворити його в рядок

Доказ

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

виведе вірно

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

Знімок

Також

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



3

Зазвичай я потребуючи що - то , що також пропускає значення , якщо це значення 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'якби мій масив виглядав би як той, що в другому моєму прикладі. Ось чому я віддаю перевагу цьому рішенню.


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 у отриманій рядку). ;)
Перекриття запасів

@StockOverflaw Шлях краще. Менше коду, щоб зробити те саме, що безпечніше та швидше. Дякую.
Хайме Монтоя

2

Papa Parse обробляє коми у значеннях та інших крайових випадках.

( Baby Parse for 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

Введення початкового коду:

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"

Звичайно, все залежить від кінцевого використання. Просто пам’ятайте джерело даних та використовуйте його, і все буде в порядку зі світом.


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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.