URL 接口提供了用於操作URL的相關方法,通過該接口,可以創建URL,獲取或更改URL的host、search、hash等,URL還能自動對URL中的組件進行編碼。
URL的組成
以如下URL為示例:
<code>http://zhangsan:password@example.com:8080/doc/note?id=88&name=first#h1/<code>
URL細分為
protocol: 協議,即 http: 部分username: 用戶名,即 zhangsan 部分password:用戶名對應的密碼,即 password 部分hostname: 主機名稱,即 example.com 部分port: 端口號,即 8080 pathname: 路徑名,即 /doc/note 部分search: 查詢字符串,即 ?id=8&name=first 部分hash:哈希部分,即 #h1 。其中,
hostname與port 合稱為 host ,即 example.com:8080 protocol + // + host 合稱為 origin ,即 http://example.com:8080 所有部分組成了 href ,即<code>http://zhangsan:password@example.com:8080/doc/note?id=88&name=first#h1/<code>
構造函數
可以通過 URL 構造函數創建一個URL對象,語法如下:
<code>url = new URL(url, [base])/<code>
構造函數有兩個參數:
url : 必選參數,為一個絕對 url 或者相對 url 。 URL 構造函數對根據傳入的url參數構建一個 URL 對象。base : 可選參數,如果第一個參數是相對 url ,則需要傳入此參數用作相對 url 的 baseURL 。傳入絕對 url
<code>var url = new URL('http://example.com:8080/doc/note?id=88&name=first#h1');/<code>
傳入相對 url
使用相對 url 時,第一個參數可以傳入類似 /a 、 ./a 和 ../a 的格式,下面給出幾個例子。
以 / 開頭,表示絕對路徑<code>var url = new URL('/user', 'http://baidu.com/doc/list');
console.log(url.href) // http://baidu.com/user/<code>以 ./ 或 ../ 開頭表示相對最後一級路徑的位置
<code>var url = new URL('./user', 'http://baidu.com/doc/list');
console.log(url.href) // http://baidu.com/doc/user
var url = new URL('../user', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://baidu.com/doc/user
var url = new URL('../../user', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://baidu.com/user/<code>傳入相對當前協議的 url
<code>var url = new URL('//kuaishou.com', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://kuaishou.com/<code>
實例屬性
對應URL的各組成部分,一個URL實例共有12個屬性:
protocol: 協議,如 http: 或 https: username: 用戶名password: 密碼hostname: 主機名, 如 example.com port: 端口號, 如 8080 host: 主機名+端口號, 如 example.com:8080 origin: 協議+主機名+端口號,如 http://example.com:8080pathname: 路徑,如 /doc/list search: 查詢參數,如 ?id=8 hash: 哈希部分,如 #h1 href: url的完整表示,如 http://example.com:8080/doc?id=5#h1 searchParams: 一個表示查詢參數的 SearchParams 對象,可以用來操作查詢參數。運行如下代碼可以看到對應的屬性值
<code>var url2 = new URL('http://zhangsan:password@example.com:8080/doc/note?id=88&name=first#h1');/<code>
如下圖:
URL實例
實例方法
toString() : 返回完整的url,與 url.href 相同。toJSON() : 和 toString() 返回值相同靜態方法
createObjectURL(object) : 該方法接收一個 Blob 對象或 File 對象,然後生成一個字符串URL,代表該對象。當創建該對象的window關閉後,該URL對象會被釋放。revokeObjectURL(url) : 手動釋放通過 createObjectURL() 創建的URL。注意點
如果對 URL 對象的 pathname 、 search 和 hash 賦值,URL會自動對輸入的值進行編碼。<code>var url = new URL('http://baidu.com/a/b')
url.pathname = '給我編碼'
console.log(url.pathname)
"/%E7%BB%99%E6%88%91%E7%BC%96%E7%A0%81"/<code>如果瀏覽器沒有實現URL對象,可以使用 window.URL