JavaScript URL 物件

URL 物件可以實現對 url 的構造、解析和編碼，HTML5 新增。

本文將結合程式碼例項對其用法和功能進行總體介紹。

一.建立物件例項：

通過建構函式 URL()可以建立一個URL 物件例項。

通俗的講，就是對一個 url 進行封裝，於是具備了對解析和編碼等操作的能力。

建構函式 URL() 屬於 window 物件，所以實際應用中可以省略 window 直接呼叫。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let url = new URL(url [, base])

引數解析：

（1）.url：必需，絕對或者相對 url 路徑，如果是相對路徑，則以 base 引數為基準。

（2）.base：可選，基準路徑（或者說基準目錄），url 是相對路徑才生效。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url = new URL("https://www.softwhy.com/article-2389-1.html");
console.log(url.href);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.通過 URL() 建構函式建立一個URL 物件例項。

（2）.建構函式的引數是一個絕對路徑。

（3）.產生的物件例項就是對這個 url 的一系列的封裝，然後就可以通過其各種藉口進行操作。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url = new URL("article-2389-1.html","https://www.softwhy.com/");
console.log(url.href);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.第一個引數是相對路徑，那麼必須要通過第二個引數來構建一個完整的 url ，否則報錯。

（2）.第二個引數是基準路徑，最終構建的 url 是 https://www.softwhy.com/article-2389-1.html。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url = new URL("article-1.html","https://www.softwhy.com/article-2.html");
console.log(url.href);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.article-2.html是頁面不是目錄，https://www.softwhy.com/ 表示web站點根目錄。

（2）.那麼最終 url 就是 https://www.softwhy.com/article-1.html。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url = new URL("..","https://www.softwhy.com/a/b/ant.html");
console.log(url.href);

程式碼分析如下：

（1）.第一個引數不但可以是具體的頁面地址，也可以是一個 相對路徑。

（2）.".." 表示上一級目錄，第二個引數規定的基準路徑是 https://www.softwhy.com/a/b/。

（3）.所以最終 url 是 https://www.softwhy.com/a/ 。

二.屬性與方法：

URL 物件具有一些的屬性和方法，用於對 url 進行操作。

由於數量較多，考慮到篇幅問題，本文不做介紹，下面是屬性和方法列表。