Cách nhận tất cả các Giá trị dữ liệu từ một URL bằng JavaScript

Tìm hiểu cách lấy tất cả các giá trị dữ liệu từ một URL bằng cách sử dụng phương pháp tạo URL của JavaScript.

Giả sử bạn đang xây dựng một số loại chức năng tìm kiếm nội bộ trên trang web của mình. Để làm điều đó đúng cách, bạn cần truy cập vào tất cả các giá trị dữ liệu của một chuỗi URL.

May mắn thay, JavaScript có một phương thức khởi tạo được gọi là new URL() cho phép chúng tôi chuyển đổi một URL thành một đối tượng cung cấp cho chúng tôi cái nhìn tổng quan được tổ chức độc đáo về mọi thuộc tính và giá trị trong URL.

Để sử dụng nó, hãy tạo một biến và gán cho nó một giá trị là new URL('your-url') . Ví dụ:bên dưới, tôi đang tạo đối tượng URL dựa trên URL cho một trong các bài viết của TechStacker:

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

Bây giờ hãy thử đăng xuất kết quả:

console.log(urlData)

Đối tượng URL trả về của bạn sẽ trông giống như sau:

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: ""
};

Và bây giờ bạn có thể dễ dàng truy cập từng tài sản và làm những gì bạn muốn với nó. Ví dụ:để có quyền truy cập vào pathname của URL của bạn, bạn sẽ làm điều này:

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