เมธอด Array.join() ใน JavaScript: รวมอาร์เรย์เป็นสตริง

เมธอด join() ใช้สำหรับ รวมองค์ประกอบทั้งหมดในอาร์เรย์เป็นสตริงเดียว โดยคั่นด้วยตัวคั่น (separator) ที่ระบุ

ไวยากรณ์ (Syntax)

array.join([separator])

• separator (ตัวเลือก) - สตริงคั่นระหว่างองค์ประกอบ (ค่าเริ่มต้น: "," คอมม่า)

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: ตรวจสอบว่าเป็นอาร์เรย์และ join

<!DOCTYPE html>
<html>
<body>
  <h2>Array.join() พื้นฐาน</h2>
  <p>นี่คืออาร์เรย์หรือไม่?</p>
  <p id="demo"></p>
  <script>
    const arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
    const isArray = Array.isArray(arr);
    const joined = arr.join(); // ใช้ค่าเริ่มต้นคือคอมม่า
    document.getElementById("demo").innerHTML = isArray + " = " + joined;
    // ผลลัพธ์: true = Accessories,Electronics,Books,Pet Supplies
  </script>
</body>
</html>

ตัวอย่างที่ 2: ระบุตัวคั่นเอง (Custom Separator)

<!DOCTYPE html>
<html>
<body>
  <h2>Array.join() กำหนดตัวคั่น</h2>
  <p id="demo"></p>
  <script>
    const arrStud = ["Laptop", "Desktop", "Tablet"];
    document.getElementById("demo").innerHTML = 
      "อาร์เรย์เริ่มต้น = " + arrStud + "<br>" +
      "สตริงคั่นด้วย '...' = " + arrStud.join("...");
    // ผลลัพธ์: Laptop...Desktop...Tablet
  </script>
</body>
</html>

ตัวอย่างเพิ่มเติม: ตัวคั่นต่างๆ

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

fruits.join();        // "Apple,Banana,Orange" (ค่าเริ่มต้น)
fruits.join('');      // "AppleBananaOrange" (ไม่มีตัวคั่น)
fruits.join('-');     // "Apple-Banana-Orange"
fruits.join(', ');    // "Apple, Banana, Orange" (คอมม่า+ช่องว่าง)
fruits.join('\n');    // "Apple\nBanana\nOrange" (ขึ้นบรรทัดใหม่)
fruits.join(' | ');   // "Apple | Banana | Orange"

กรณีพิเศษ

• อาร์เรย์ว่าง: [].join('-') → "" (สตริงว่าง)
• มี undefined หรือ null: จะแปลงเป็นสตริงว่าง ""
• อ็อบเจกต์: จะเรียก toString() (ปกติได้ "[object Object]")

[1, undefined, 3, null].join('-'); // "1--3-" (undefined/null กลายเป็นว่าง)
[{a:1}, {b:2}].join('|'); // "[object Object]|[object Object]"

การใช้งานจริง: สร้าง CSV, URL, Class Names

// สร้าง CSV line
const row = ['John', 'Doe', '30', 'Engineer'];
const csvLine = row.join(','); // "John,Doe,30,Engineer"

// สร้าง query string
const params = ['name=John', 'age=30', 'city=NYC'];
const queryString = params.join('&'); // "name=John&age=30&city=NYC"

// รวม CSS class names
const classes = ['btn', 'btn-primary', 'active', 'large'];
const className = classes.join(' '); // "btn btn-primary active large"