ทำงานกับ URL ใน JavaScript

ใน JavaScript บางครั้งจำเป็นต้องทำงานกับ ที่อยู่ลิงก์ สำหรับสิ่งนี้มีคลาส URL ซึ่งช่วยให้ได้รับและเปลี่ยนแปลง ส่วนต่าง ๆ ของที่อยู่ได้

ลองดูการทำงานของมันโดยใช้ตัวอย่างที่อยู่ ต่อไปนี้:

let path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

มาสร้างอ็อบเจ็กต์ของคลาส URL โดยส่ง ที่อยู่ของเราเป็นพารามิเตอร์:

let url = new URL(path);

มาดูกันว่าอ็อบเจ็กต์ที่สร้างขึ้นมีคุณสมบัติ อะไรบ้าง

โปรโตคอล

ใช้คุณสมบัติ protocol เพื่อรับ โปรโตคอล:

let res = url.protocol;
console.log(res); // แสดงผล 'http://'

ใช้คุณสมบัติ host เพื่อรับ ชื่อโดเมนพร้อมพอร์ต:

let res = url.host;
console.log(res); // แสดงผล 'site.ru:3000'

ใช้คุณสมบัติ hostname เพื่อรับ ชื่อโดเมน:

let res = url.hostname;
console.log(res); // แสดงผล 'site.ru'

ใช้คุณสมบัติ port เพื่อรับพอร์ต:

let res = url.port;
console.log(res); // แสดงผล '3000'

ใช้คุณสมบัติ pathname เพื่อ ตัดชื่อโดเมนออก แล้วรับพาธ:

let res = url.pathname;
console.log(res); // แสดงผล '/dir/eee/page.html#show?a=1&b=2&c=3'

ใช้คุณสมบัติ hash เพื่อรับ ค่าแฮช:

let res = url.hash;
console.log(res); // แสดงผล 'show'

ใช้คุณสมบัติ search เพื่อรับ สตริงของพารามิเตอร์ GET:

let res = url.search;
console.log(res); // แสดงผล 'a=1&b=2&c=3'

ใช้คุณสมบัติ searchParams เพื่อ รับพารามิเตอร์ GET ในรูปแบบของอ็อบเจ็กต์คลาส URLSearchParams:

let res = url.searchParams;
console.log(res); // แสดงผลอ็อบเจ็กต์ของคลาส URLSearchParams