統(tǒng)一資源定位符，縮寫(xiě)為URL，是對(duì)網(wǎng)絡(luò)資源(網(wǎng)頁(yè)、圖像、文件)的引用。URL指定資源位置和檢索資源的機(jī)制(http、ftp、mailto)。

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

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

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

一個(gè)方便的用于獲取 URL 組成部分的辦法是通過(guò) URL() 構(gòu)造函數(shù)。

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

接著，我會(huì)告訴你如何使用 URL() 構(gòu)造函數(shù)來(lái)輕松獲取 URL 的組成部分，比如 hostname，pathname，query 或者 hash。

1. URL 結(jié)構(gòu)

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

image

2. URL() 構(gòu)造函數(shù)

URL() 構(gòu)造函數(shù)允許我們用它來(lái)解析一段 URL：

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

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

舉個(gè)例子，讓我們用一個(gè)絕對(duì)路徑的 URL 來(lái)初始化 URL() 函數(shù)：

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

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

或者我們可以使用相對(duì)路徑和絕對(duì)路徑：

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

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

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

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

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 參數(shù)在 JavaScript 中會(huì)映射成字符串。

3. Query 字符串

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

const url = new URL(

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

);

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

如果 query 參數(shù)不存在，url.search 默認(rèn)會(huì)返回一個(gè)空字符串 ''：

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 字符串，更實(shí)用的場(chǎng)景是獲取到具體的 query 參數(shù)。

獲取具體 query 參數(shù)的一個(gè)簡(jiǎn)單的方法是利用 url.searchParams 屬性。這個(gè)屬性是 URLSearchParams 的實(shí)例。

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

下面來(lái)看個(gè)例子：

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 這個(gè) query 參數(shù)的值——hello。

如果使用 url.searchParams.get('missing') 來(lái)獲取一個(gè)不存在的參數(shù)，則得到一個(gè) 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，則該屬性返回一個(gè)斜杠 /：

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

url.pathname; // => '/'

6. hash

最后，我們可以通過(guò) url.hash 屬性來(lái)獲取 URL 中的 hash 值：

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

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

當(dāng) URL 中的 hash 不存在時(shí)，url.hash 屬性會(huì)返回一個(gè)空字符串 ''：

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

url.hash; // => ''

7. URL 校驗(yàn)

當(dāng)使用 new URL() 構(gòu)造函數(shù)來(lái)新建實(shí)例的時(shí)候，作為一種副作用，它同時(shí)也會(huì)對(duì) URL 進(jìn)行校驗(yàn)。如果 URL 不合法，則會(huì)拋出一個(gè) TypeError。

舉個(gè)例子，http ://example.com 是一段非法 URL，因?yàn)樗?http 后面多寫(xiě)了一個(gè)空格。

讓我們用這個(gè)非法 URL 來(lái)初始化 URL() 構(gòu)造函數(shù)：

try {

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

} catch (error) {

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

}

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

8. 修改 URL

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

舉個(gè)例子，讓我們把一段 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() 實(shí)例中只有 origin 和 searchParams 屬性是只讀的，其他所有的屬性都是可寫(xiě)的，并且會(huì)修改原來(lái)的 URL。

9. 總結(jié)

URL() 構(gòu)造函數(shù)是 JavaScript 中的一個(gè)能夠很方便地用于解析（或者校驗(yàn)）URL 的工具。

new URL(relativeOrAbsolute [, absoluteBase]) 中的第一個(gè)參數(shù)接收 URL 的絕對(duì)路徑或者相對(duì)路徑。當(dāng)?shù)谝粋€(gè)參數(shù)是相對(duì)路徑時(shí)，第二個(gè)參數(shù)必傳且必須為第一個(gè)參數(shù)的基路徑。

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

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

url.searchParams 通過(guò) URLSearchParams 的實(shí)例去獲取具體的 query 參數(shù)

url.hostname獲取 hostname

url.pathname 獲取 pathname

url.hash 獲取 hash 值

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

藍(lán)藍(lán)設(shè)計(jì)( www.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)