URL

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

Giao diện URL được dùng để phân tích, tạo, chuẩn hóa và mã hóa URL. Nó hoạt động bằng cách cung cấp các thuộc tính cho phép bạn dễ dàng đọc và sửa đổi các thành phần của một URL.

Thông thường, bạn tạo một đối tượng URL mới bằng cách chỉ định URL dưới dạng chuỗi khi gọi constructor của nó, hoặc bằng cách cung cấp một URL tương đối và một URL cơ sở. Sau đó bạn có thể dễ dàng đọc các thành phần đã được phân tích của URL hoặc thay đổi URL.

Constructor

URL()

Tạo và trả về một đối tượng URL từ một chuỗi URL và một chuỗi URL cơ sở tùy chọn. Ném lỗi nếu các đối số được truyền vào không xác định một URL hợp lệ.

Thuộc tính thể hiện

hash

Một chuỗi chứa "#" theo sau là định danh phân mảnh của URL.

host

Một chuỗi chứa domain (tức hostname) theo sau bởi, nếu có chỉ định port, một ":"port của URL.

hostname

Một chuỗi chứa domain của URL.

href

Một stringifier trả về chuỗi chứa toàn bộ URL.

origin Read only

Trả về một chuỗi chứa origin của URL, tức là scheme, domain và port của nó.

password

Một chuỗi chứa mật khẩu được chỉ định trước tên miền.

pathname

Một chuỗi chứa dấu '/' ban đầu theo sau là đường dẫn của URL, không bao gồm query string hoặc fragment.

port

Một chuỗi chứa số port của URL.

protocol

Một chuỗi chứa scheme giao thức của URL, bao gồm dấu ':' cuối cùng.

Một chuỗi biểu thị chuỗi tham số của URL; nếu có tham số nào được cung cấp, chuỗi này sẽ bao gồm tất cả chúng, bắt đầu bằng ký tự ?.

searchParams Read only

Một đối tượng URLSearchParams có thể dùng để truy cập các tham số truy vấn riêng lẻ có trong search.

username

Một chuỗi chứa tên người dùng được chỉ định trước tên miền.

Phương thức tĩnh

canParse()

Trả về một giá trị boolean cho biết một URL được xác định từ chuỗi URL và chuỗi URL cơ sở tùy chọn có thể phân tích và hợp lệ hay không.

createObjectURL()

Trả về một chuỗi chứa một blob URL duy nhất, tức là một URL với blob: làm scheme, theo sau là một chuỗi opaque nhận diện duy nhất đối tượng trong trình duyệt.

parse()

Tạo và trả về một đối tượng URL từ một chuỗi URL và chuỗi URL cơ sở tùy chọn, hoặc trả về null nếu các tham số được truyền vào xác định một URL không hợp lệ.

revokeObjectURL()

Thu hồi một object URL đã được tạo trước đó bằng URL.createObjectURL().

Phương thức thể hiện

toString()

Trả về một chuỗi chứa toàn bộ URL. Nó là đồng nghĩa với URL.href, dù không thể dùng nó để sửa đổi giá trị.

toJSON()

Trả về một chuỗi chứa toàn bộ URL. Nó trả về cùng chuỗi với thuộc tính href.

Ghi chú sử dụng

Constructor nhận tham số url và một tham số base tùy chọn để dùng làm cơ sở nếu tham số url là một URL tương đối:

js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

Constructor sẽ ném ngoại lệ nếu URL không thể được phân tích thành một URL hợp lệ. Bạn có thể gọi đoạn mã trên trong một khối try...catch hoặc dùng phương thức tĩnh canParse() để kiểm tra trước rằng URL là hợp lệ:

js
if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("Invalid URL");
}

Các thuộc tính của URL có thể được đặt để tạo URL:

js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

URL được mã hóa theo các quy tắc trong RFC 3986. Ví dụ:

js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

Giao diện URLSearchParams có thể dùng để xây dựng và thao tác chuỗi truy vấn của URL.

Để lấy các tham số tìm kiếm từ URL của cửa sổ hiện tại, bạn có thể làm như sau:

js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

Phương thức toString() của URL chỉ trả về giá trị của thuộc tính href, vì vậy constructor có thể được dùng để chuẩn hóa và mã hóa một URL trực tiếp.

js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

Thông số kỹ thuật

Thông số kỹ thuật
URL
# url

Tương thích trình duyệt

Xem thêm