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

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

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'

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

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

const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html"color: #ff0000">Parsing query string


访问查询参数比访问原始查询字符串更方便
一种简单的查询参数选择方法提供了 url.searchParams 属性，该属性包含 URLSearchParams 的实例
URLSearchParams 对象提供了许多方法(如 get (param)、 has (param))来访问查询字符串参数
看一个例子:


const url = new URL(
 'http://example.com/path/index.html"color: #ff0000">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"htmlcode">

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/parse-url-javascript/

            
            上一篇：详解Vue+elementUI build打包部署后字体图标丢失问题

            下一篇：Vue3新特性之在Composition API中使用CSS Modules