統一資源定位符，縮寫為URL，是對網絡資源(網頁、圖像、文件)的引用。URL指定資源位置和檢索資源的機制(http、ftp、mailto)。

舉個例子，這里是這篇文章的 URL 地址：

https://dmitripavlutin.com/parse-url-javascript

很多時候你需要獲取到一段 URL 的某個組成部分。它們可能是 hostname（例如 dmitripavlutin.com），或者 pathname（例如 /parse-url-javascript）。

一個方便的用于獲取 URL 組成部分的辦法是通過 URL() 構造函數。

在這篇文章中，我將給大家展示一段 URL 的結構，以及它的主要組成部分。

接著，我會告訴你如何使用 URL() 構造函數來輕松獲取 URL 的組成部分，比如 hostname，pathname，query 或者 hash。

1. URL 結構

一圖勝千言。不需要過多的文字描述，通過下面的圖片你就可以理解一段 URL 的各個組成部分：

image

2. URL() 構造函數

URL() 構造函數允許我們用它來解析一段 URL：

const url = new URL(relativeOrAbsolute [, absoluteBase]);

參數 relativeOrAbsolute 既可以是絕對路徑，也可以是相對路徑。如果第一個參數是相對路徑的話，那么第二個參數 absoluteBase 則必傳，且必須為第一個參數的絕對路徑。

舉個例子，讓我們用一個絕對路徑的 URL 來初始化 URL() 函數：

const url = new URL('http://example.com/path/index.html');

url.href; // => 'http://example.com/path/index.html'

或者我們可以使用相對路徑和絕對路徑：

const url = new URL('/path/index.html', 'http://example.com');

url.href; // => 'http://example.com/path/index.html'

URL() 實例中的 href 屬性返回了完整的 URL 字符串。

在新建了 URL() 的實例以后，你可以用它來訪問前文圖片中的任意 URL 組成部分。作為參考，下面是 URL() 實例的接口列表：

interface URL {

 href:     USVString;

 protocol: USVString;

 username: USVString;

 password: USVString;

 host:     USVString;

 hostname: USVString;

 port:     USVString;

 pathname: USVString;

 search:   USVString;

 hash:     USVString;

 readonly origin: USVString;

 readonly searchParams: URLSearchParams;

 toJSON(): USVString;

}

上述的 USVString 參數在 JavaScript 中會映射成字符串。

3. Query 字符串

url.search 可以獲取到 URL 當中 ? 后面的 query 字符串：

const url = new URL(

 'http://example.com/path/index.html?message=hello&who=world'

);

url.search; // => '?message=hello&who=world'

如果 query 參數不存在，url.search 默認會返回一個空字符串 ''：

const url1 = new URL('http://example.com/path/index.html');

const url2 = new URL('http://example.com/path/index.html?');

url1.search; // => ''

url2.search; // => ''

3.1 解析 query 字符串

相比于獲得原生的 query 字符串，更實用的場景是獲取到具體的 query 參數。

獲取具體 query 參數的一個簡單的方法是利用 url.searchParams 屬性。這個屬性是 URLSearchParams 的實例。

URLSearchParams 對象提供了許多用于獲取 query 參數的方法，如get(param)，has(param)等。

下面來看個例子：

const url = new URL(

 'http://example.com/path/index.html?message=hello&who=world'

);

url.searchParams.get('message'); // => 'hello'

url.searchParams.get('missing'); // => null

url.searchParams.get('message') 返回了 message 這個 query 參數的值——hello。

如果使用 url.searchParams.get('missing') 來獲取一個不存在的參數，則得到一個 null。

4. hostname

url.hostname 屬性返回一段 URL 的 hostname 部分：

const url = new URL('http://example.com/path/index.html');

url.hostname; // => 'example.com'

5. pathname

url. pathname 屬性返回一段 URL 的 pathname 部分：

const url = new URL('http://example.com/path/index.html?param=value');

url.pathname; // => '/path/index.html'

如果這段 URL 不含 path，則該屬性返回一個斜杠 /：

const url = new URL('http://example.com/');

url.pathname; // => '/'

6. hash

最后，我們可以通過 url.hash 屬性來獲取 URL 中的 hash 值：

const url = new URL('http://example.com/path/index.html#bottom');

url.hash; // => '#bottom'

當 URL 中的 hash 不存在時，url.hash 屬性會返回一個空字符串 ''：

const url = new URL('http://example.com/path/index.html');

url.hash; // => ''

7. URL 校驗

當使用 new URL() 構造函數來新建實例的時候，作為一種副作用，它同時也會對 URL 進行校驗。如果 URL 不合法，則會拋出一個 TypeError。

舉個例子，http ://example.com 是一段非法 URL，因為它在 http 后面多寫了一個空格。

讓我們用這個非法 URL 來初始化 URL() 構造函數：

try {

 const url = new URL('http ://example.com');

} catch (error) {

 error; // => TypeError, "Failed to construct URL: Invalid URL"

}

因為 http ://example.com 是一段非法 URL，跟我們想的一樣，new URL() 拋出了一個 TypeError。

8. 修改 URL

除了獲取 URL 的組成部分以外，像 search，hostname，pathname 和 hash 這些屬性都是可寫的——這也意味著你可以修改 URL。

舉個例子，讓我們把一段 URL 從 red.com 修改成 blue.io：

const url = new URL('http://red.com/path/index.html');

url.href; // => 'http://red.com/path/index.html'

url.hostname = 'blue.io';

url.href; // => 'http://blue.io/path/index.html'

注意，在 URL() 實例中只有 origin 和 searchParams 屬性是只讀的，其他所有的屬性都是可寫的，并且會修改原來的 URL。

9. 總結

URL() 構造函數是 JavaScript 中的一個能夠很方便地用于解析（或者校驗）URL 的工具。

new URL(relativeOrAbsolute [, absoluteBase]) 中的第一個參數接收 URL 的絕對路徑或者相對路徑。當第一個參數是相對路徑時，第二個參數必傳且必須為第一個參數的基路徑。

在新建 URL() 的實例以后，你就能很輕易地獲得 URL 當中的大部分組成部分了，比如：

url.search 獲取原生的 query 字符串

url.searchParams 通過 URLSearchParams 的實例去獲取具體的 query 參數

url.hostname獲取 hostname

url.pathname 獲取 pathname

url.hash 獲取 hash 值

那么你最愛用的解析 URL 的 JavaScript 工具又是什么呢？

藍藍設計( www.dzxscac.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務