JS URL

Definition

URL là một API thuộc Browser API giúp thao tác với các đường dẫn một cách dễ dàng hơn.

Tạo ra một instance từ constructor của lớp URL:

const url = new URL("https://www.youtube.com/")

Cũng có thể tạo từ URL của trang hiện tại như sau:

const url = new URL(window.location.href)

Có thể lấy ra giao thức của URL thông qua thuộc tính protocol:

console.log(url.protocol) // https

Chúng ta thay đổi tên miền bằng thuộc tính hostname và lấy ra chuỗi URL thông qua thuộc tính href:

url.hostname = "google.com"
 
console.log(url.href) // https://google.com/

Phương thức toString() cũng lấy ra được chuỗi URL giống như thuộc tính href.

console.log(url.toString()) // https://google.com/

Thêm vào các tham số truy vấn thông qua thuộc tính search:

url.search = "?name=Kwan&age=20"

Search Parameters

Chúng ta có thể dùng thuộc tính searchParams thuộc lớp đối tượng URLSearchParams để chỉnh sửa các tham số truy vấn.

Ví dụ dưới thêm vào hai tham số là name và age:

url.searchParams.set("name", "Kwan")
url.searchParams.set("age", 20)

Tương tự, để lấy ra tham số truy vấn, ta dùng phương thức get:

console.log(url.searchParams.get("name")) // "Kwan"
console.log(url.searchParams.get("age")) // 20

Chuỗi URL khi đó sẽ là:

console.log(url.href) // https://www.youtube.com/?name=Kwan&age=20

Using with Fetch API

Đối tượng thuộc lớp URL cũng có thể được dùng như là đường dẫn của hàm fetch:

const url = new URL("https://example.org")
url.searchParams.set("name", "Kwan")
url.searchParams.set("age", 20)
 
fetch(url)
  .then((res) => console.log(res))
  .catch((err) => console.log(err))