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
URLtừ 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
":"và 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.
originRead 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. search-
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ự
?. searchParamsRead only-
Một đối tượng
URLSearchParamscó thể dùng để truy cập các tham số truy vấn riêng lẻ có trongsearch. 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
URLtừ một chuỗi URL và chuỗi URL cơ sở tùy chọn, hoặc trả vềnullnếu các tham số được truyền vào xác định mộtURLkhô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:
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ệ:
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:
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ụ:
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:
// 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.
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> |