สร้าง URL Object ใน JavaScript ด้วย Constructor URL()

URL interface (Web API) ใช้สร้าง จัดการ และแยกวิเคราะห์ URL ได้อย่างง่ายดาย คลาสนี้รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด และ Node.js 10+

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

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>URL Object</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>สร้าง URL Object ใน JavaScript</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>กดปุ่มเพื่อสร้างและแยกส่วน URL</h3>
  <script>
    const resEle = document.querySelector(".result");
    // สร้าง URL object
    const url = new URL("https://google.com/image=23&size=440px");
    document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML += "protocol = " + url.protocol + "<br>";   // https:
      resEle.innerHTML += "host = " + url.host + "<br>";           // google.com
      resEle.innerHTML += "pathname = " + url.pathname + "<br>";     // / (empty path)
      resEle.innerHTML += "search = " + url.search + "<br>";         // ?image=23&size=440px
      resEle.innerHTML += "hash = " + url.hash + "<br>";             // (empty)
      resEle.innerHTML += "href = " + url.href + "<br>";             // full URL
      resEle.innerHTML += "origin = " + url.origin + "<br>";         // https://google.com
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม "คลิกที่นี่":

สร้าง URL Object ใน JavaScript ด้วย Constructor URL()

พร็อพเพอร์ตี้หลักของ URL Object

Property	ตัวอย่าง	คำอธิบาย
`href`	https://example.com:8080/path?name=value#hash	URL เต็ม (read/write)
`protocol`	https:	โปรโตคอล (มี : ท้าย)
`host`	example.com:8080	host + port
`hostname`	example.com	host ไม่รวม port
`port`	8080	พอร์ต (ว่าง = default)
`pathname`	/path	พาธ (เริ่มด้วย /)
`search`	?name=value	Query string (มี ? นำหน้า)
`searchParams`	URLSearchParams	อ็อบเจกต์จัดการ query params
`hash`	#hash	Fragment (มี # นำหน้า)
`origin`	https://example.com:8080	protocol + host (read-only)
`username` / `password`	user:pass@	ข้อมูลรับรอง (deprecated ใน URL)

จัดการ Query Parameters ด้วย URLSearchParams

const url = new URL("https://example.com?foo=1&bar=2");
// เพิ่ม
url.searchParams.append("baz", "3");
// แก้ไข
url.searchParams.set("foo", "10");
// ลบ
url.searchParams.delete("bar");
// อ่าน
url.searchParams.get("foo"); // "10"
url.searchParams.getAll("foo"); // ["10"] (หลายค่า)
// วนลูป
for (const [key, value] of url.searchParams) {
  console.log(key, value);
}
// toString() กลับเป็น query string
url.searchParams.toString(); // "foo=10&baz=3"

Relative URL Resolution

const base = new URL("https://example.com/docs/");
const relative = new URL("../api/users", base);
console.log(relative.href); // "https://example.com/api/users"

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

Parse/Build URL อย่างปลอดภัย (หลีกเลี่ยง string concatenation)
จัดการ Query String แทน regex/manual parsing
Validate URL: new URL(input) โยน Error ถ้า invalid
Same-origin check: url.origin === window.location.origin