统一资源定位符(URL)，是对 Web 资源（网页、图像、文件）的引用。URL 是指定资源位置和检索资源的一种协议（如http、ftp、mailto）。

如下代码，这是今日头条发布文章的URL地址：

https://mp.toutiao.com/profile_v4/graphic/publish

有时需要从URL中获取特定的信息，比如域名、页面地址、查询参数等，这里介绍如何使用URL对象来解析。

URL结构

如下图，详细介绍组成URL的各个部分：

• protocol —— 网络协议，如http、https、mailto、ftp等。
• username—— 用户名，如ftp访问时需要用户名。
• password——密码，如ftp访问时需要密码。
• hostname——主机名称。
• port——端口号。
• host——主机地址，包括hostname，和port。
• pathname——路径名称。
• search——查询字符串，问号“？”开头。
• path——完整路径，包括路径名称和查询参数。
• hash——哈希值，#号开头。

URL()构造函数

创建一个URL解析实例，如下：

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

通过上面url实例对象就可以解析一个路径地址。

relativeOrAbsolute参数可以是绝对或相对 URL。如果第一个参数是相对的，那么第二个参数absoluteBase必须要有，并且必须是一个绝对 URL，作为第一个参数的基础路径。

例如，使用绝对 URL 进行初始化

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

或者，使用相对路径初始化

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

你可以在控制台打印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;
}

在JavaScript 中 USVString 返回url中对应部分的字符串值。

获取路径上查询字符串

使用 url.search 属性访问以 ? 为前缀的查询字符串，如下：

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

如果没有查询字符串，则url.search 返回空字符串''。

解析查询字符串

使用url.searchParams属性解析查询字符串，通过get方法获取对应参数值，或者has方法判断是否存在某一个参数。

让我们看一个例子：

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.has('who');  // => true
url.searchParams.has('missing');  // => false

关于URLSearchParams更多方法，可以参考 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

获取主机名

使用 url.hostname 属性获取 URL 的主机名，如下：

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

路径名

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; // => '/'

哈希值

最后，可以使用 url.hash 属性获取哈希值：

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

当 URL 中的哈希值丢失时，url.hash计算结果为空字符串''：

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

网址验证

当new URL()构造函数创建实例时，它还会验证 URL 的正确性。如果 URL 值无效，则抛出 TypeError。

例如，http ://example.com 是一个无效的 URL，因为 http 后面有空格字符。

让我们使用这个无效的 URL 来初始化解析器：

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

URL 修改

除了使用 search、hostname、pathname等属性获取值，您还可以通过这些属性重新赋值修改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。

总结

JavaScript 中的 URL()对象可以方便地解析和验证URL。

new URL(relativeOrAbsolute [, absoluteBase])接受绝对或相对 URL 作为第一个参数。当第一个参数是相对的时，您必须将提供第二个参数做为第一个参数的基础URL。

创建URL()实例后，您可以轻松访问最常见的 URL 属性值，例如：

• url.search 获取原始查询字符串
• url.searchParamsURLSearchParams 解析查询字符串中的参数
• url.hostname 访问主机名
• url.pathname 读取路径名
• url.hash 获取哈希值

关于浏览器支持，在现代浏览器中都支持URL对象。但是，它在 Internet Explorer 中不可用。