new URL()

URL 接口是 web 接口，包含若干静态方法的对象，用来创建 URLs。

当使用一个没有实现该构造器的用户代理时，可以通过 window.URL 属性来访问该对象（比如小程序里面就只有 window.URL），对于没有 URL 的用户代理，可以使用第三方实现，比如：https://github.com/zloirock/core-js/blob/master/packages/core-js/web/url.js

基础使用参见：

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL
https://developer.mozilla.org/zh-CN/docs/Web/API/URL
https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

容易让人疑惑的点：

示例一，Chrome 浏览器：

const obj = new URL('http://hostname/pathname?name=value#hash')
console.log(obj);

//output
hash: "#hash"
href: "http://hostname/pathname?name=pages/main/index#hash"
password: ""
port: ""
protocol: "http:"
search: "?name=value"
searchParams: URLSearchParams {}
username: ""

host: "hostname"
hostname: "hostname"
pathname: "/pathname"
origin: "http://hostname"

示例二，Chrome 浏览器，把 http 协议换成 scheme：

const obj = new URL('scheme://hostname/pathname?name=value#hash')
console.log(obj);

//output
hash: "#hash"
href: "scheme://hostname/pathname?name=value#hash"
password: ""
port: ""
protocol: "scheme:"
search: "?name=value"
searchParams: URLSearchParams {}
username: ""

host: ""
hostname: ""
pathname: "//hostname/pathname"
origin: "null"

示例三，Node.js：

const url = require('url');
const obj = url.parse('scheme://hostname/pathname?name=value#hash');
console.log(obj);

//output
hash: '#hash',
href: 'scheme://hostname/pathname?name=value#hash'
protocol: 'scheme:',
slashes: true,
auth: null,
port: null,
search: '?name=pages/main/index',
query: '?name=pages/main/index',


host: 'hostname',
hostname: 'hostname',
pathname: '/pathname',
path: '/pathname?name=pages/main/index',

可以看出，这个 URL 的规范与其他实现里面的实现还是有区别的，whatwg 的 URL Standard 定义了几个 special-scheme：

https://url.spec.whatwg.org/#special-scheme

当你发现 URL 解析的结果不符合你的预期时，你需要的可能是 URI ，而不是 URL。=。=