การแปลง Array ให้เป็น String ใน JavaScript มีหลายวิธี แต่ละวิธีให้ผลลัพธ์และความยืดหยุ่นต่างกัน
ตัวอย่างโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array to String</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
</style>
</head>
<body>
<h1>Parse String จาก JavaScript Array</h1>
<div class="result"></div>
<button class="Btn">คลิกที่นี่</button>
<h3>คลิกปุ่มด้านบนเพื่อแปลง Array arr เป็น String</h3>
<script>
const BtnEle = document.querySelector(".Btn");
const resEle = document.querySelector(".result");
const arr = ["Cow", "Lion", "Tiger", "Dog", "Cat"];
BtnEle.addEventListener("click", () => {
resEle.innerHTML = arr.toString();
});
</script>
</body>
</html>
วิธีแปลง Array เป็น String ทั้งหมด
| Method | Code | Result | Custom Separator? |
|---|---|---|---|
| toString() | arr.toString() | "Cow,Lion,Tiger,Dog,Cat" | ❌ ไม่ได้ (คอมมาคงที่) |
| join() | arr.join(", ") | "Cow, Lion, Tiger, Dog, Cat" | ✅ ได้ (แนะนำ) |
| JSON.stringify | JSON.stringify(arr) | '["Cow","Lion","Tiger","Dog","Cat"]' | ❌ (JSON Format) |
| String() | String(arr) | "Cow,Lion,Tiger,Dog,Cat" | ❌ เรียก toString() ภายใน |
| Template Literal | \`\${arr}\` | "Cow,Lion,Tiger,Dog,Cat" | ❌ เรียก toString() ภายใน |
join() - วิธีที่ยืดหยุ่นที่สุด
const arr = ["a", "b", "c"];
arr.join(); // "a,b,c" (Default comma)
arr.join(""); // "abc" (No separator)
arr.join(" | "); // "a | b | c" (Custom)
arr.join("\n"); // "a\nb\nc" (New line)
arr.join(","); // "a,b,c" (Same as toString)
Empty Array Behavior
[].toString(); // "" (Empty String)
[].join(","); // "" (Empty String)
[].join("|"); // "" (Empty String)
Nested Arrays
[[1,2], [3,4]].toString(); // "1,2,3,4" (Flatten 1 level)
[[1,2], [3,4]].join(";"); // "1,2;3,4" (Inner arrays toString)
JSON.stringify([[1,2],[3,4]]); // "[[1,2],[3,4]]" (Preserve structure)
ผลลัพธ์
Cow,Lion,Tiger,Dog,Cat (คั่นด้วยคอมมา ไม่มีช่องว่าง)