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

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

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

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

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

javascriptlet url = new URL(path);

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

โปรโตคอล

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

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

โฮสต์

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

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

ชื่อโฮสต์

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

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

พอร์ต

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

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

พาธ

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

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

แฮช

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

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

พารามิเตอร์ GET

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

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

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

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