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。=。=