統一資源定位符，縮寫為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 的各個組成部分：

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。

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

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 值