new URL()

2019-01-01

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

如有问题,请咨询QQ群 723245925


文档信息 by XiaoPingYuan

版权声明:自由转载-非商用-非衍生-保持署名。发表日期:2019-01-01 by XiaoPingYuan(https://xesam.github.io/)