👷🏼 ☕️ 🗾 如何解析JavaScript中的URL？ 💆🏿 👨🏾‍🌾 🐅

朋友们，美好的一天！

我提请您注意Dmitri Pavlutin的文章“如何在JavaScript中解析URL：主机名，路径名，查询，哈希”的翻译。

统一资源定位符或简称URL是指向Web资源（网页，图像，文件）的链接。URL定义资源的位置以及如何接收资源-协议（http，ftp，mailto）。

例如，这是本文的URL：

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

通常有必要检索URL的某些元素。这可以是主机名（hostname，dmitripavlutin.com）或路径名（pathname，/parse-url-javascript）。

获取URL的各个组件的便捷方法是使用构造函数URL()。

在本文中，我们将讨论URL的结构和主要组成部分。

1. URL结构

一张图片胜过千言万语。在上图中，您可以看到URL的主要组成部分：

2. URL构造函数（）

构造URL()函数是使您能够解析（解析）URL组件的函数：

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

参数relativeOrAbsolute可以是绝对URL或相对URL。如果第一个参数是相对链接，则第二个参数absoluteBase是必需的，并且是作为第一个参数基础的绝对URL。

例如，让我们URL()使用绝对URL进行初始化：

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

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

现在，让我们结合相对和绝对URL：

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

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

hrefinstance 属性URL()返回传递的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.查询字符串

该属性url.search允许您获取以前缀开头的URL查询字符串?：

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

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

如果没有查询字符串，则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。解析（解析）查询字符串

除了获取原始查询字符串，我们还可以获取其参数。

该属性提供了一种简单的方法url.searchParams。此属性的值是URLSeachParams接口的实例。

该对象URLSearchParams提供了许多使用查询字符串参数（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查询字符串参数的值。

访问不存在的参数url.searchParams.get('missing')将返回null。

4.主机名（hostname）

该属性值url.hostname是URL的主机名：

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

url.hostname // 'example.com'

5.路径（路径名）

该属性url.pathname包含URL路径：

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

url.pathname // '/path/index.html'

如果URL没有路径，则url.pathname返回字符/：

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

url.pathname; // '/'

6.哈希

最后，可以通过属性获得哈希值url.hash：

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

url.hash // '#bottom'

如果没有哈希，它将url.hash返回一个空字符串（''）：

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

url.hash // ''

7.检查（验证）URL

调用构造函数new URL()不仅可以创建实例，还可以验证传递的URL。如果URL无效，则将其丢弃TypeError。

例如，这http ://example.com不是有效的网址，因为后面http有一个空格。

让我们尝试使用以下URL：

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

由于'http ://example.com'错误的网址按预期方式new URL('http ://example.com')抛出TypeError。

8.使用URL

诸如search, hostname, pathname, hash可写的属性。

例如，让我们将现有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'

属性origin, searchParams是只读的。

9.结论

构造函数URL()是解析（解析）和验证JavaScript中URL的一种非常方便的方法。

new URL(relativeOrAbsolute, [, absoluteBase]将绝对或相对URL作为第一个参数。如果第一个参数是相对URL，则第二个参数必须是绝对URL-第一个参数的基础。

创建实例后URL()，您可以访问URL的主要组件：

url.search -原始查询字符串
url.searchParams-URLSearchParams获取查询字符串参数的实例
url.hostname - 主机名
url.pathname - 办法
url.hash -哈希值

如何解析JavaScript中的URL？