การ Join Array พร้อมเงื่อนไข ทำได้โดยรวม filter() กับ join() กรองเฉพาะสมาชิกที่ต้องการ แล้วค่อย Join เป็น String
ตัวอย่างโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conditional Join</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.result, .sample { font-size: 18px; font-weight: 500; color: rebeccapurple; }
.result { color: red; }
</style>
</head>
<body>
<h1>Join JavaScript Array พร้อมเงื่อนไข</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">คลิกที่นี่</button>
<h3>คลิกปุ่มด้านบนเพื่อ Join สมาชิกที่หาร 2 ลงตัว</h3>
<script>
const BtnEle = document.querySelector(".Btn");
const resEle = document.querySelector(".result");
const sampleEle = document.querySelector(".sample");
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 11, 22, 33, 18];
sampleEle.innerHTML = arr.join(", ");
// Filter ก่อน Join
const joinArr = arr.filter(el => el % 2 === 0).join(" : ");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = joinArr;
});
</script>
</body>
</html>Pattern ทั่วไป
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 1. Filter + Join (Basic)
data.filter(x => x % 2 === 0).join(", "); // "2, 4, 6, 8, 10"
// 2. Map + Filter + Join (Transform แล้ว Join)
data.filter(x => x > 5).map(x => x * 2).join(" | "); // "12 | 14 | 16 | 18 | 20"
// 3. Reduce (Flexible มากกว่า)
data.reduce((acc, x) => {
if (x % 2 === 0) acc.push(x * 10);
return acc;
}, []).join("-"); // "20-40-60-80-100"
// 4. Custom Separator Logic
data.filter(x => x > 3).join(" 👉 "); // "4 👉 5 👉 6 👉 7 👉 8 👉 9 👉 10"
Join Separator Tips
join()ไม่มี argument = คอมมา (",")join("")= รวมต่อกันโดยไม่มี Seperatorjoin("\n")= ขึ้นบรรทัดใหม่- Empty Array:
[].join(",")= "" (Empty String)
ผลลัพธ์
2 : 4 : 6 : 8 : 22 : 18 (เฉพาะเลขคู่ คั่นด้วย " : ")
