关于javascript:译如何用-JavaScript-来解析-URL

原文链接：https://dmitripavlutin.com/pa…

对立资源定位符，缩写为 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。

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 工具又是什么呢？