URL接口用于解析，构造，规范化和编码 URLs。它通过提供允许您轻松阅读和修改URL组件的属性来工作。通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。
如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL属性。确保检查您的任何目标浏览器是否要求对此添加前缀。

一、方法

1.1 构造方法

语法：

const url = new URL(url [, base])

参数：

url	是一个表示绝对或相对 URL 的 `DOMString`。如果`url` 是相对 URL，则会将 `base` 用作基准 URL。如果 `url` 是绝对URL，则无论参数base是否存在，都将被忽略。
base(可选)	是一个表示基准 URL 的 `DOMString`，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为 `''`。

let m = 'https://developer.mozilla.org';
let a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
let b = new URL(m);                                     // => 'https://developer.mozilla.org/'
 new URL('http://www.example.com', );           // => 'http://www.example.com/'
 new URL('http://www.example.com', b);          // => 'http://www.example.com/'

1.2 createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
语法：

objectURL = URL.createObjectURL(object);

参数：

object	用于创建 URL 的 File对象、Blob 对象或者 MediaSource 对象。

返回值：
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

$("#new-file-arraybuffer").on("click", function() {
        var xhr = new XMLHttpRequest();
        var url = $.rootPath + "file/constructor";
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var content = xhr.response;
            var file = new File([content], "test.doc", {type: "text/plain"});
            var a = document.createElement("a");
            a.download = "testArray.doc";
            a.style.dispaly = "none";
            a.href = URL.createObjectURL(file);
            console.log(a.href) //输出创建的URL
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a)
        }
        xhr.send();
    })

控制台输出：

1.3 revokeObjectURL()

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
语法：

window.URL.revokeObjectURL(objectURL);

参数：

objectURL	一个 `DOMString`，表示通过调用 `URL.createObjectURL()` 方法产生的 URL 对象。

返回值：
undefined

$("#new-file-arraybuffer").on("click", function() {
        var xhr = new XMLHttpRequest();
        var url = $.rootPath + "file/constructor";
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var content = xhr.response;
            var file = new File([content], "test.doc", {type: "text/plain"});
            var a = document.createElement("a");
            a.download = "testArray.doc";
            a.style.dispaly = "none";
            a.href = URL.createObjectURL(file);
            console.log(a.href)
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(a.href) //释放URL
            document.body.removeChild(a)
        }
        xhr.send();
    })

二、属性

2.1 hash

包含’#’的USVString，后跟URL的片段标识符。URL 接口的 hash 属性返回一个 USVString，其中会包含URL标识中的 ‘#’ 和 fragment 标识符（fragment 即我们通常所说的 URL hash）

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
url.hash // Returns '#Examples'

2.2 href、origin、protocol、host、hostname、port

2.1.1 href

URL 接口的 href 属性是一个包含完整 URL 的 USVString 值。

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href');
var result = url.href; // Returns: 'https://developer.mozilla.org/en-US/docs/Web/API/URL/href'

2.1.2 origin 只读

URL.origin 是一个只读属性，返回一个 USVString 类型值，包含 URL 源经过 Unicode 序列化之后的值, 也就是：

对于使用 http 或者 https 协议的 URL, 返回协议名, 然后是 '://', 然后是域, 然后是 ':', 最后是端口号 (默认端口是 80 和 443);
对于使用 file: 协议的 URL, 返回值因浏览器而异;
对于使用 blob: 协议的 URL, 返回值是 blob: 后跟随的源地址. 例如 "blob:https://mozilla.org" 将会返回 "https://mozilla.org".
```
var result = new URL("blob:https://mozilla.org:443/").origin;
// 返回:'https://developer.mozilla.org:443'
var result = new URL("http://mozilla.org:8080/ajiohjoi/kjkk").origin;
// 返回"http://mozilla.org:8080"
```
2.1.3 protocol
URL接口的protocol是一个包含URL协议的USVString值,此值包含协议后的’:’.
```
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
var result = url.protocol; // Returns:"https:"
```
2.1.4 host
URL 接口的 host 属性是一个 USVString 值，包含了主机信息，也就是主机名（hostname），还有，如果 URL 接口不为空，也会包含冒号 ‘:’ 和 URL 的端口（port）。 ```javascript var url = new URL(‘https://developer.mozilla.org/en-US/docs/Web/API/URL/host‘); var result = url.host // “developer.mozilla.org”

var url = new URL(‘https://developer.mozilla.org:443/en-US/docs/Web/API/URL/host‘); var result = url.host // “developer.mozilla.org” // The port number is not included because 443 is the scheme’s default port

var url = new URL(‘https://developer.mozilla.org:4097/en-US/docs/Web/API/URL/host‘); var result = url.host // “developer.mozilla.org:4097”

<a name="aoVjq"></a>
### 2.1.5 hostname
URL 接口的 hostname 属性是一个 USVString 值，包含有 URL 中的域名。
```javascript
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname');
var result = url.hostname; // Returns:'developer.mozilla.org'

2.1.6 port

URL 接口的端口属性是包含了URL的端口号信息的USVString值，如果URL中不包含明确的端口号，这个属性将为’’.

var url = new URL('https://baidu.com/');
var result = url.port; // Returns:''

var url = new URL('http://localhost:8080/');
var result = url.port; // Returns:'8080'

2.3 password、username

2.3.1 password

URL接口的password属性为USVString，其中包含在域名之前指定的密码。

var url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password');
var result = url.password; // Returns:"flabada"

2.3.2 username

URL接口的username属性是USVString ，其中包含域名前指定的username 。

var url = new URL("https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/username");
var user = url.username; // 返回：“anonymous”

2.4 pathname、search、searchParams

2.4.1 pathname

URL接口的pathname属性是一个USVString，包含一个初始 ‘/‘ 和URL的路径(如果没有路径，则为空字符串)

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname');
var result = url.pathname; // Returns:"/en-US/docs/Web/API/URL/pathname"

2.4.2 search

URL 接口的search 属性是一个搜索字符串，也称为查询字符串，这是一个USVString包含一个 ‘?’后面跟着URL的参数

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
var queryString = url.search; // Returns:"?q=123"

2.4.3 searchParams

URL 接口的 searchParams 属性返回一个 URLSearchParams 对象，这个对象包含当前 URL 中解码后的 GET 查询参数。
如果你的 URL 是 https://example.com/?name=Jonathan&age=18 ，你可以这样解析 URL，然后得到 name 和 age 的值。

let params = (new URL(document.location)).searchParams;
let name = params.get('name'); // is the string "Jonathan Smith".
let age = parseInt(params.get('age')); // is the number 18

URL学习笔记

一、方法

1.1 构造方法

1.2 createObjectURL()

1.3 revokeObjectURL()

二、属性

2.1 hash

2.2 href、origin、protocol、host、hostname、port

2.1.1 href

2.1.2 origin 只读

2.1.3 protocol

2.1.4 host

2.1.6 port

2.3 password、username

2.3.1 password

2.3.2 username

2.4 pathname、search、searchParams

2.4.1 pathname

2.4.2 search

2.4.3 searchParams