web API學習之URL

URL 接口提供了用於操作URL的相關方法，通過該接口，可以創建URL，獲取或更改URL的host、search、hash等，URL還能自動對URL中的組件進行編碼。

URL的組成

以如下URL為示例：

<code>http://zhangsan:[email protected]: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:[email protected]: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

• 以 / 開頭，表示絕對路徑

<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個屬性：

1. protocol: 協議，如 http: 或 https:
2. username: 用戶名
3. password: 密碼
4. hostname: 主機名, 如 example.com
5. port: 端口號, 如 8080
6. host: 主機名+端口號, 如 example.com:8080
7. origin: 協議+主機名+端口號，如 http://example.com:8080
8. pathname: 路徑，如 /doc/list
9. search: 查詢參數,如 ?id=8
10. hash
    : 哈希部分，如 #h1
11. href: url的完整表示，如 http://example.com:8080/doc?id=5#h1
12. searchParams: 一個表示查詢參數的 SearchParams 對象，可以用來操作查詢參數。

運行如下代碼可以看到對應的屬性值

<code>var url2 = new URL('http://zhangsan:[email protected]: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

閱讀更多 一起學前端 的文章

關鍵字: 學習 Origin