Простой способ превратить массив JavaScript в список через запятую?

403

У меня есть одномерный массив строк в JavaScript, который я хотел бы превратить в список через запятую. Есть ли простой способ в JavaScript для сада (или jQuery) превратить его в список через запятую? (Я знаю, как перебирать массив и сам строить строку путем конкатенации, если это единственный способ.)

Херб Каудилл
источник
2
toString () : Если вы ищете самый простой способ, лучше использовать toString () следующим образом: он var arr = ["Zero", "One", "Two"]; console.log(arr.toString());возвращает Zero,One,Two Read more
Мохаммад Мусави

Ответы:

784

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

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

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

Wayne
источник
2
@Mark: достаточно верно, но мне нужно объединить список идентификаторов, без запятых и других специальных символов
davewilliams459
11
@ davewilliams459: Но ты не ОП? Оп сказал "одномерный массив строк". Строки. Не идентификаторы. Это подразумевает, что они могут быть чем угодно. Это означает, что они могут содержать другие запятые.
mpen
22
@Mark: ответ правильный на вопрос, как задано. Любые другие требования оставлены на усмотрение индивидуума. OP запросил список через запятую, а не в формате CSV.
Уэйн
10
@Wayne: я все еще думаю, что предупреждение в порядке :) Люди не всегда продумывают эти вещи, и затем они стреляют себе в ногу позже.
mpen
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 = new Array (3);
arr [0] = "Ноль";
arr [1] = "Один";
arr [2] = "Два";

document.write (обр); // так же, как document.write (arr.toString ()) в этом контексте

Метод toString массива при вызове возвращает именно то, что вам нужно - список через запятую.

Сергей Ильинский
источник
2
В большинстве случаев toString на самом деле медленнее соединения массива. Смотрите здесь: jsperf.com/tostring-join
Самир
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");
    };
}
skibulk
источник
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(',');

играть на скрипке

В основном все, что он делает, это проверяет, содержит ли строка запятую или кавычку. Если это так, то он удваивает все кавычки и ставит кавычки на концах. Затем он соединяет каждую из частей запятой.

mpen
источник
2
Noooooooooo! Соблазн понизить. Что делать, если кавычки следует экранировать с помощью обратной косой черты ?! Они должны быть переменными. ;)
Джошуа Бернс
1
@JoshuaBurns википедия говорит, что двойные кавычки следует избегать с другой цитатой, но формального стандарта нет. Если вашему CSV-ридеру требуется что-то другое, не стесняйтесь изменять и / или понижать голос;)
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. Использование массива # join

От 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+[];

Сагар V
источник
8

Используйте встроенный Array.toStringметод

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

MDN на Array.toString ()

Авиджит Гупта
источник
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'если мой массив будет выглядеть так же, как во втором примере. Вот почему я предпочитаю это решение.

knowbody
источник
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

Папа Парс обрабатывает запятые в значениях и других крайних случаях.

( Baby Parse для Node устарел - теперь вы можете использовать Papa Parse в Браузере и в Node.)

Например. (узел)

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.

Попробуйте Аррфорд :


Применение

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
Alejandro
источник
1
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код. Также постарайтесь не переполнять ваш код пояснительными комментариями, это снижает удобочитаемость кода и пояснений!
kayess
0

Это решение также удаляет такие значения, как " ":

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

console.log(result); // => foo, bar
йоркширец
источник