วิธีง่ายๆในการเปลี่ยนอาร์เรย์ JavaScript เป็นรายการที่คั่นด้วยเครื่องหมายจุลภาคหรือไม่


403

ฉันมีสตริงในหนึ่งมิติใน 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: จริงเพียงพอ แต่ฉันต้องเชื่อมโยงรายชื่อ ID ไม่ต้องใช้เครื่องหมายจุลภาคหรือตัวอักษรพิเศษอื่น ๆ อีกต่อไป
davewilliams459

11
@ davewilliams459: แต่คุณไม่ใช่ OP ใช่ไหม Op กล่าวว่า "สตริงแบบหนึ่งมิติ" เงื่อนไข ไม่ใช่ ID นั่นหมายความว่าพวกเขาสามารถเป็นอะไรก็ได้ ซึ่งหมายความว่าพวกเขาอาจมีเครื่องหมายจุลภาคอื่น ๆ
mpen

22
@ Mark: คำตอบนั้นถูกต้องสำหรับคำถามที่ถาม ข้อกำหนดอื่น ๆ จะถูกปล่อยให้เป็นรายบุคคลเพื่อทำงานเพื่อตนเอง OP ขอรายการที่คั่นด้วยเครื่องหมายจุลภาคไม่ใช่รูปแบบ CSV ที่ยกมา
เวย์น

10
@ เวย์น: ฉันยังคงคิดว่ามีคำเตือน :) ผู้คนมักไม่คิดว่าสิ่งเหล่านี้ผ่านแล้วพวกเขาก็ยิงตัวเองด้วยการเดินเท้าในภายหลัง
mpen

13
@ Mark - ความคิดเห็นของคุณใช้ได้อย่างสมบูรณ์แบบ (ตามที่คนอื่นระบุด้วย upvote) แต่มีประโยชน์มากกว่าที่จะให้คำตอบทางเลือกด้วยโค้ดตัวอย่างจริง ๆ ?
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
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 ที่มีการ Escape อย่างเหมาะสม ฟังก์ชั่นไม่ได้ตรวจสอบการป้อนสตริง / หมายเลขที่ถูกต้องหรือจำนวนคอลัมน์ (ให้แน่ใจว่าอาร์เรย์ของคุณถูกต้องเพื่อเริ่มต้นด้วย) เซลล์สามารถมีเครื่องหมายจุลภาคและเครื่องหมายคำพูด!

นี่คือสคริปต์สำหรับถอดรหัสสตริง 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! ล่อลวงให้โหวต เกิดอะไรขึ้นถ้าคำพูดที่ควรจะหนีด้วยแบ็กสแลช! พวกเขาจำเป็นต้องแปรผัน ;)
Joshua Burns

1
@JoshuaBurns wikipediaพูดว่าการเสนอราคาซ้ำควรหลีกหนีด้วยการเสนอราคาอื่น แต่ไม่มีมาตรฐานที่เป็นทางการ หากผู้อ่าน CSV ของคุณต้องมีบางสิ่งบางอย่างที่แตกต่างกันให้ความรู้สึกอิสระที่จะแก้ไขและ / หรือ downvote;)
mpen

5
ที่จริงแล้วมี RFC, tools.ietf.org/rfc/rfc4180.txtและนั่นคือเครื่องหมายคำพูดคู่ที่ถูกต้องควรจะหนีด้วยเครื่องหมายคำพูดคู่
Steve Buzonas

2
@SteveBuzonas คุณเพิ่ง pwned ผู้ชายคนนั้นด้วย RFC ของคุณ
devinbost

9

หากคุณต้องการใช้ "และ" แทน "," ระหว่างสองรายการสุดท้ายคุณสามารถทำได้:

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

9

มีวิธีการมากมายในการแปลงอาร์เรย์เป็นรายการที่คั่นด้วยเครื่องหมายจุลภาค

1. การใช้ array # join

จากMDN

วิธีการเข้าร่วม () รวมองค์ประกอบทั้งหมดของอาร์เรย์ (หรือวัตถุเหมือนอาร์เรย์) ลงในสตริง

รหัส

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. เพิ่ม [] + ก่อนอาร์เรย์หรือ + [] หลังอาร์เรย์

The [] +หรือ+ []จะแปลงเป็นสตริง

พิสูจน์

([]+[] === [].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 บนสตริงผลลัพธ์) ;)
ต็อก Overflaw

@StockOverflaw วิธีที่ดีกว่า โค้ดน้อยลงในการทำสิ่งเดียวกันพร้อมปลอดภัยยิ่งขึ้นและเร็วขึ้น ขอบคุณ.
Jaime Montoya

2

Papa 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 ,, "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

คุณต้องการที่จะจบด้วย "และ"?

สำหรับสถานการณ์นี้ฉันสร้างโมดูล 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 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.