哼，今天就带你吃透URL

本文已参与【新人创作礼】活动，一起开启掘金创作之路。

当我们使用浏览器进行网络冲浪的时候，我们访问的内容是从哪里出现的呢？没错，就是浏览器地址栏出现的那一串东东标识的位置，习惯上我们将其称为URL。

用途

它的全称是：统一资源定位符（Uniform Resource Locator），顾名思义就是标识某个资源的位置。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在浏览器的地址框中输入一个URL时，就确定了要浏览的地址。

URL的常见格式：

protocol://host[:port]/path/[?query]#fragment

组成	说明
protocol	访问服务器获取资源时使用的协议
user	访问资源时使用的用户名
password	用户的密码，和用户名使用:分割
host	资源服务器域名或IP地址
port	资源服务器监听的端口，不同的协议有不同的默认端口（HTTP使用80作为默认端口，HTTPS使用443作为端口）
path	资源路径
query	查询参数。以 ? +键值对的形式表示，多个键值对通过 & 符号分隔
fragment	片段 # 后面的内容，常见于链接，锚点

当然了，还有一些不常见的格式，比如：

protocol://user:password@host:port/path;params?query#fragment

可以发现这里多了user:password和;params，二者表示访问资源时使用的用户名密码和某些情况下使用逗号分割的参数，不太常见，有兴趣自己了解下。

字符

URL是使用 ASCII 进行编码的，所以有些内容是不支持的，例如中文， URL会使用编码的手段将其转义为可解释内容。

在URL中，合法字符分成两类。

• URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
• 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

除了以上字符，其他字符出现在 URL 之中都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。

比如，UTF-8 的操作系统上，http://www.example.com/q=春节这个 URL 之中，汉字“春节”不是 URL 的合法字符，所以被浏览器自动转成http://www.example.com/q=%E6%98%A5%E8%8A%82。其中，“春”转成了%E6%98%A5，“节”转成了%E8%8A%82。这是因为“春”和“节”的 UTF-8 编码分别是E6 98 A5和E8 8A 82，将每个字节前面加上百分号，就构成了 URL 编码。

JavaScript 提供四个 URL 的编码/解码方法。

• encodeURI()
• encodeURIComponent()
• decodeURI()
• decodeURIComponent()

encodeURI()

encodeURI()方法用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。

encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

encodeURIComponent()

encodeURIComponent()方法用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它接受一个参数，就是 URL 的片段。

encodeURIComponent('春节')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

decodeURI()

decodeURI()方法用于整个 URL 的解码。它是encodeURI()方法的逆运算。它接受一个参数，就是转码后的 URL。

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春节"

decodeURIComponent()

decodeURIComponent()用于URL 片段的解码。它是encodeURIComponent()方法的逆运算。它接受一个参数，就是转码后的 URL 片段。

decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春节"

URL函数

浏览器原生提供URL()接口，它是一个构造函数，用来构造、解析和编码 URL。一般情况下，通过 window.URL 可以拿到这个构造函数。

URL()作为构造函数，可以生成 URL 实例。它接受一个表示 URL 的字符串作为参数。如果参数不是合法的 URL，会报错。

var url = new URL('http://www.example.com/index.html');
url.href
// "http://www.example.com/index.html"

也可以将URL的实例作为参数传入：

var urlclone = new URL(url);
urlclone
// "http://www.example.com/index.html"

如果 URL 字符串是一个相对路径，那么需要表示绝对路径的第二个参数，作为计算基准。

var url1 = new URL('index.html', 'http://example.com');
url1.href
// "http://example.com/index.html"
​
var url2 = new URL('page2.html', 'http://example.com/page1.html');
url2.href
// "http://example.com/page2.html"
​
var url3 = new URL('..', 'http://example.com/a/b.html')
url3.href
// "http://example.com/"
​
var url4 = new URL('..', 'http://example.com/a/b/c/d.html')
url3.href
// 'http://example.com/a/b/'

上面代码中，返回的 URL 实例的路径都是在第二个参数的基础上，切换到第一个参数得到的。最后两个例子里面，第一个参数是..，表示上层路径。

属性

URL 实例的属性与Location对象的属性基本一致，返回当前 URL 的信息。

• URL.href：返回整个 URL
• URL.protocol：返回协议，以冒号:结尾
• URL.hostname：返回域名
• URL.host：返回域名与端口，包含:号，默认的80和443端口会省略
• URL.port：返回端口
• URL.origin：返回协议、域名和端口
• URL.pathname：返回路径，以斜杠/开头
• URL.search：返回查询字符串，以问号?开头
• URL.searchParams：返回一个URLSearchParams实例，该属性是Location对象没有的⭐
• URL.hash：返回片段识别符，以井号#开头
• URL.password：返回域名前面的密码
• URL.username：返回域名前面的用户名

同 location 一样，只有 origin 属性是只读的。

通过该方法解析任意一个网址信息：

/**
 * 解析URL信息的函数
 * @param  {string} url
 * @returns {protocol, username, password, hostname, port, pathname, search, hash}
 */
function toUrlObj(url) {
    return new URL(url);
}
let urlParse = toUrlObj("http://www.bufanui.com/project/h5?name=libai&age=24#aaa");
console.log(urlParse.pathname); // 获取路径
console.log(urlParse.search); // 获取查询参数

方法

（1）URL.createObjectURL()

URL.createObjectURL()方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL。

<input type="file" class="ipt" accept="image/*" multiple>
<div class="box">
</div>

let box = document.querySelector('.box'),
    ipt = document.querySelector(".ipt");
​
ipt.onchange = function () {
  for (var i = 0; i < this.files.length; i++) {
    let imgEl = document.createElement('img');
    imgEl.src = URL.createObjectURL(this.files[i]);
    box.append(imgEl);
  }
}

上面代码中，URL.createObjectURL()方法用来为上传的文件生成一个 URL 字符串，作为<img>元素的图片来源。

该方法生成的 URL 就像下面的样子。

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

注意，每次使用URL.createObjectURL()方法，都会在内存里面生成一个 URL 实例，即使是同样的二进制数据，也会得到一个不一样的 URL。这个 URL 的存在时间，等同于网页的存在时间，如果网页刷新或卸载，这个 URL 也会失效。因此，如果不再需要该方法生成的 URL 字符串，为了节省内存，可以使用URL.revokeObjectURL()方法释放这个实例。

（2）URL.revokeObjectURL()

URL.revokeObjectURL()方法用来释放URL.createObjectURL()方法生成的 URL 实例。它的参数就是URL.createObjectURL()方法返回的 URL 字符串。

下面为上一段的示例加上URL.revokeObjectURL()。

let box = document.querySelector('.box'),
    ipt = document.querySelector(".ipt");
​
ipt.onchange = function () {
  for (var i = 0; i < this.files.length; i++) {
    let imgEl = document.createElement('img');
    imgEl.src = URL.createObjectURL(this.files[i]);
    box.append(imgEl);
    imgEl.onload = function() {
      URL.revokeObjectURL(this.src);
    }
  }
}

上面代码中，一旦图片加载成功以后，为本地文件生成的 URL 字符串就没用了，于是可以在img.onload调函数里面，通过URL.revokeObjectURL()方法卸载这个 URL 实例。

URLSearchParams 对象

URLSearchParams对象是浏览器的原生对象，用来构造、解析和处理 URL 的查询字符串（即 URL 问号后面的部分）。

它本身也是一个构造函数，可以生成实例。参数可以为查询字符串，起首的问号?有没有都行，也可以是对应查询字符串的数组或对象。

// 方法一：传入字符串
var params = new URLSearchParams('?foo=1&bar=2');
// 等同于
var params = new URLSearchParams(document.location.search);
​
// 方法二：传入数组
var params = new URLSearchParams([['foo', 1], ['bar', 2]]);
​
// 方法三：传入对象
var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});

URLSearchParams会对查询字符串自动编码。

const params = new URLSearchParams({'foo': '你好'});
params.toString() // "foo=%E4%BD%A0%E5%A5%BD"

上面代码中，foo的值是汉字，URLSearchParams对其自动进行 URL 编码。

浏览器向服务器发送表单数据时，可以直接使用URLSearchParams实例作为表单数据。

const params = new URLSearchParams({foo: 1, bar: 2});
fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

上面代码中，fetch命令向服务器发送命令时，可以直接使用URLSearchParams实例。

URLSearchParams 可以与 URL() 接口结合使用。

var url = new URL(window.location);
var foo = url.searchParams.get('foo') || 'somedefault';

上面代码中，URL 实例的searchParams属性就是一个URLSearchParams实例，所以可以使用URLSearchParams接口的get方法。

URLSearchParams实例有遍历器接口，可以用for...of循环遍历（详见《ES6 标准入门》的《Iterator》一章）。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
​
for (var p of params) {
  console.log(p[0] + ': ' + p[1]);
}
// foo: 1
// bar: 2

URLSearchParams没有实例属性，只有实例方法。

var url = new URL('https://example.com?foo=1&bar=2');

• toString 方法返回实例的字符串形式

  url.searchParams.toString();
  // foo=1&bar=2
  

  需要字符串的场合，会自动调用toString方法。

  var str = "?" + url.searchParams;
  str
  // ?foo=1&bar=2
  

• append 方法用来追加一个查询参数。它接受两个参数，第一个为键名，第二个为键值，没有返回值。

  var params = new URLSearchParams({'foo': 1 , 'bar': 2});
  params.append('baz', 3);
  params.toString() // "foo=1&bar=2&baz=3"
  

  append()方法不会识别是否键名已经存在。

  var params = new URLSearchParams({'foo': 1 , 'bar': 2});
  params.append('foo', 3);
  params.toString() // "foo=1&bar=2&foo=3"
  

  上面代码中，查询字符串里面foo已经存在了，但是append依然会追加一个同名键。

• delete()方法用来删除指定的查询参数。它接受键名作为参数。

  var params = new URLSearchParams({'foo': 1 , 'bar': 2});
  params.delete('bar');
  params.toString() // "foo=1"
  

• has()方法返回一个布尔值，表示查询字符串是否包含指定的键名。

  var params = new URLSearchParams({'foo': 1 , 'bar': 2});
  params.has('bar') // true
  params.has('baz') // false
  

• set()方法用来设置查询字符串的键值。

  它接受两个参数，第一个是键名，第二个是键值。如果是已经存在的键，键值会被改写，否则会被追加。

  var params = new URLSearchParams('?foo=1');
  params.set('foo', 2);
  params.toString() // "foo=2"
  params.set('bar', 3);
  params.toString() // "foo=2&bar=3"
  

  如果有多个的同名键，set会移除现存所有的键。

  var params = new URLSearchParams('?foo=1&foo=2');
  params.set('foo', 3);
  params.toString() // "foo=3"
  

• get()方法用来读取查询字符串里面的指定键。它接受键名作为参数。如果指定的键名不存在，返回值是null。

  var params = new URLSearchParams('?foo=1');
  params.get('foo') // "1"
  params.get('bar') // null
  

  如果有多个的同名键，get返回位置最前面的那个键值。

  var params = new URLSearchParams('?foo=3&foo=2&foo=1');
  params.get('foo') // "3"
  

• getAll()方法返回一个数组，成员是指定键的所有键值。它接受键名作为参数。

  var params = new URLSearchParams('?foo=1&foo=2');
  params.getAll('foo') // ["1", "2"]
  

• sort()方法对查询字符串里面的键进行排序，规则是按照 Unicode 码点从小到大排列。

  该方法没有返回值，或者说返回值是undefined。

  var params = new URLSearchParams('c=4&a=2&b=3&a=1');
  params.sort();
  params.toString() // "a=2&a=1&b=3&c=4"
  

  上面代码中，如果有两个同名的键a，它们之间不会排序，而是保留原始的顺序。

• keys()、values()、entries() 三个方法都返回一个遍历器对象，供for...of循环遍历。它们的区别在于，keys方法返回的是键名的遍历器，values方法返回的是键值的遍历器，entries返回的是键值对的遍历器。

  var params = new URLSearchParams('a=1&b=2');
  ​
  for(var p of params.keys()) {
    console.log(p);
  }
  // a
  // b
  ​
  for(var p of params.values()) {
    console.log(p);
  }
  // 1
  // 2
  ​
  for(var p of params.entries()) {
    console.log(p);
  }
  // ["a", "1"]
  // ["b", "2"]
  

  \