JavaScript 배열을 쉼표로 구분 된 목록으로 바꾸는 쉬운 방법?


403

JavaScript에 쉼표로 구분 된 목록으로 바꾸려는 1 차원 문자열 배열이 있습니다. 가든 버라이어티 JavaScript (또는 jQuery)에 쉼표로 구분 된 목록으로 변환하는 간단한 방법이 있습니까? (배열을 반복하고 연결 방법으로 문자열을 직접 만드는 방법 만 알고 있습니다.)


2
의 toString () : 당신이 간단한 방법을 찾고 있다면 그것을 사용하는 것이 좋습니다 toString () 이 같은 : var arr = ["Zero", "One", "Two"]; console.log(arr.toString());반환 Zero,One,Two 더 읽기
모하마드 Musavi

답변:


784

Array.prototype.join () 방법 :

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

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


2
@Mark : 충분히 사실이지만 ID 목록을 연결해야합니다. 쉼표 나 다른 특수 문자가 없을 가능성이 있습니다
davewilliams459

11
@ davewilliams459 :하지만 당신은 OP가 아니십니까? Op는 "일차원 배열의 문자열"이라고 말했다. 문자열. ID가 아닙니다. 그것은 그들이 무엇이든 될 수 있음을 의미합니다. 이는 다른 쉼표를 포함 할 수 있음을 의미합니다.
mpen

22
@ 마크 : 질문에 대한 답변이 정답입니다. 다른 요구 사항은 개인이 스스로 해결해야합니다. OP는 따옴표로 묶인 CSV 형식이 아닌 쉼표로 구분 된 목록을 요청했습니다.
Wayne

10
@Wayne : 경고는 순서대로 진행된다고 생각합니다. :) 사람들은 항상 이런 것들을 생각하지는 않으며 나중에 발로 쏴 버립니다.
mpen

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

array.toString은 쉼표 뒤에 공백없이 작업을 수행합니다. array.join을 사용하면 유연합니다.
jMike

3
성능 toString()join(",")2018 년 4 월 기준과 거의 동일
MattMcKnight

29

또는 (보다 효율적으로) :

var arr = new Array (3);
arr [0] = "제로";
arr [1] = "하나";
arr [2] = "2";

document.write (arr); //이 문맥에서 document.write (arr.toString ())과 동일

호출 될 때 배열의 toString 메소드는 쉼표로 구분 된 목록으로 필요한 것을 정확하게 리턴합니다.


2
대부분의 경우 toString은 실제로 배열 조인보다 느립니다. Lookie here : jsperf.com/tostring-join
Sameer Alibhai

13

다음은 2 차원 배열 또는 열 배열을 올바르게 이스케이프 된 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 wikipedia에 따르면 큰 따옴표는 다른 따옴표로 이스케이프해야하지만 공식적인 표준은 없습니다. CSV 리더에 다른 무언가가 필요한 경우 자유롭게 수정하거나
다운 보트하십시오

5
실제로 RFC, tools.ietf.org/rfc/rfc4180.txt 가 있으며 올바른 큰 따옴표는 큰 따옴표로 이스케이프해야합니다.
Steve Buzonas 2018 년

2
@SteveBuzonas, 당신은 당신의 RFC와 그 사람을 pwn했다.
devinbost

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

나는 보통 그 값이 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 더 나은. 동일한 작업을 수행하는 코드가 적고 안전하고 빠릅니다. 감사합니다.
Jaime Montoya

2

Papa Parse 는 값과 기타 엣지 케이스에서 쉼표를 처리합니다.

( 노드에 대한 Baby Parse 는 더 이상 사용되지 않습니다. 이제 브라우저와 노드에서 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";

결합 기능을 사용하는 초기 답변이 이상적입니다. 고려해야 할 한 가지는 문자열을 궁극적으로 사용하는 것입니다.

최종 텍스트 표시에 사용하는 경우 :

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

"and"로 끝내시겠습니까?

이 상황에서 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

현재 크롬 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
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.