JavaScript中你可能不知道URL构造函数的属性

URL

URL 是对立资源定位符，对能够从互联网上失去的资源的地位和拜访办法的一种简洁的示意，是互联网上规范资源的地址。互联网上的每个文件都有一个惟一的 URL，它蕴含的信息指出文件的地位以及浏览器应该怎么解决它,

在 Web 开发中，有许多状况须要解析 URL, 这篇次要学习如何应用 URL 对象实现这一点
例如，这里是这篇博客文章的门路:

https://www.vipbic.com/thread.html?id=101

通常您须要拜访 URL 的特定属性。这些可能是主机名(例如 vipbic.com)，或者路径名(例如 /thread)

JavaScript 用于拜访 URL 对象的提供一个 URL()构造函数，很不便解析

一个残缺 URL

用一张图片来解释，没有太多的文字描述，在上面的图片中你能够找到一个 URL 的次要蕴含属性:

URL constructor

URL ()是一个 constuctor 函数，它能够解析 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'

创立 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;}

能够尝试在浏览中打印

Query string

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

Parsing query string

拜访查问参数比拜访原始查问字符串更不便

一种简略的查问参数抉择办法提供了 url.searchParams 属性，该属性蕴含 URLSearchParams 的实例

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

get.(‘message’), 返回音讯查问参数的值 -‘hello’, 当去尝试，拜访一个不存在的参数 url.searchParams.get(‘missing’)的后果为 null

hostname

Hostname 属性蕴含 URL 的主机名:

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

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

hash

能够应用 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; // => ''

URL validation

当 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"}

因为 ’http ://example. com’ 是一个有效的 URL，正如预期的那样，new URL (‘http ://example. com’)抛出一个 TypeError

URL manipulation

除了拜访 URL 属性之外，搜寻、主机名、路径名、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

总结

URL()构造函数能够不便地在 JavaScript 中解析 (和验证) URL
new URL (relativeOrAbsolute [，absolute base]) 承受作为第一个参数的相对或绝对 URL。如果第一个参数是绝对的，则必须将第二个参数指
示为一个作为第一个参数根底的 URL
创立 URL()实例后，能够获取到以下实列办法

• url.search 原始查问字符串
• url.searchParams 抉择查问字符串参数
• url.hostname 拜访主机名
• url.pathname 读取路径名
• url.hash #前面的参数

文章属于翻译，作者局部有所改变，
作者：羊学生
英文原文，https://dmitripavlutin.com/pa…