การใช้งานเมธอด join() ใน JavaScript

เมธอด join()

Array.join() รวม Element ทั้งหมดใน Array เป็น String เดียว

Syntax

array.join(separator)

• separator (Optional): String ใช้คั่นระหว่าง Element Default: Comma (",")

ตัวอย่างโค้ด

<html>
<head>
  <title>JavaScript Array join Method</title>
</head>
<body>
  <script>
    var arr = new Array("Football", "Hockey", "Squash");
    var str = arr.join();
    document.write("str : " + str);
    var str = arr.join(", ");
    document.write("<br />str : " + str);
    var str = arr.join(" + ");
    document.write("<br />str : " + str);
  </script>
</body>
</html>

ผลลัพธ์

str : Football,Hockey,Squash
str : Football, Hockey, Squash
str : Football + Hockey + Squash

รายละเอียด

• ไม่ Mutate Array ต้นฉบับ
• Element จะถูก Convert เป็น String อัตโนมัติ
• null และ undefined จะกลายเป็น Empty String
• Array ว่าง [] คืนค่า "" (Empty String)

ตัวอย่างเพิ่มเติม

const fruits = ['Apple', 'Banana', 'Orange'];

fruits.join();        // "Apple,Banana,Orange"
fruits.join(', ');    // "Apple, Banana, Orange"
fruits.join(' + ');   // "Apple + Banana + Orange"
fruits.join('');      // "AppleBananaOrange"
fruits.join('-');     // "Apple-Banana-Orange"

// กับตัวเลข
[1, 2, 3].join('-');  // "1-2-3"

// กับ Object (จะเรียก toString())
[{a:1}, {b:2}].join('|'); // "[object Object]|[object Object]"

join() vs toString()

การใช้งานจริง

// สร้าง CSV Line
const row = ['John', 'Doe', 'john@example.com', '30'];
const csvLine = row.join(',');
console.log(csvLine); // "John,Doe,john@example.com,30"

// สร้าง URL Query String
const params = ['key1=value1', 'key2=value2'];
const query = params.join('&'); // "key1=value1&key2=value2"

// แสดงรายการสวยงาม
const items = ['Apple', 'Banana', 'Orange'];
console.log(items.join(', ')); // "Apple, Banana, Orange"

สรุป

join() รวม Array เป็น String คั่นด้วย Separator ที่กำหนด (Default Comma) ยืดหยุ่นกว่า toString() ไม่ Mutate Original Array