วิธีรับค่าข้อมูลทั้งหมดจาก URL ด้วย JavaScript

เรียนรู้วิธีรับค่าข้อมูลทั้งหมดจาก URL โดยใช้วิธีสร้าง URL ของ JavaScript

สมมติว่าคุณกำลังสร้างฟังก์ชันการค้นหาภายในบางประเภทบนเว็บไซต์ของคุณ หากต้องการทำอย่างถูกต้อง คุณต้องเข้าถึงค่าข้อมูลทั้งหมดของสตริง URL

โชคดีที่ JavaScript มีเมธอดตัวสร้างชื่อ new URL() ที่ช่วยให้เราสามารถแปลง URL เป็นอ็อบเจ็กต์ที่ให้ภาพรวมที่มีการจัดระเบียบอย่างดีของทุกคุณสมบัติและค่าใน URL

ในการใช้งาน ให้สร้างตัวแปรและกำหนดค่า new URL('your-url') . ตัวอย่างเช่น ด้านล่าง ฉันกำลังสร้างวัตถุ URL ตาม URL สำหรับบทความของ TechStacker:

const urlData = new URL('https://techstacker.com/how-to-detect-double-clicks-with-vanilla-javascript');

ตอนนี้ลองออกจากระบบผลลัพธ์:

console.log(urlData)

ออบเจ็กต์ URL ที่ส่งคืนของคุณจะมีลักษณะดังนี้:

var url = {
	hash: "",
	host: "techstacker.com",
	hostname: "techstacker.com",
	href: "https://techstacker.com/,how-to-detect-double-clicks-with-vanilla-javascript",
	origin: "https://techstacker.com",
	password: "",
	pathname: "/how-to-detect-double-clicks-with-vanilla-javascript"
	port: "",
	protocol: "https:",
	search: "",
	searchParams: "URLSearchParams {}",
	username: ""
};

และตอนนี้คุณสามารถเข้าถึงที่พักแต่ละแห่งได้อย่างง่ายดายและทำสิ่งที่คุณต้องการด้วย ตัวอย่างเช่น หากต้องการเข้าถึง pathname ของ URL ของคุณ คุณต้องดำเนินการดังนี้:

console.log(url.pathname)
// Prints: "/how-to-detect-double-clicks-with-vanilla-javascript"