URL 是互联网的基础设施之一。浏览器提供了一些原生对象,用来管理 URL。

Location 对象

Location对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。通过window.locationdocument.location属性,可以拿到这个对象。

属性

Location对象提供以下属性。

  • Location.href:整个 URL。
  • Location.protocol:当前 URL 的协议,包括冒号(:)。
  • Location.host:主机。如果端口不是协议默认的80433,则还会包括冒号(:)和端口。
  • Location.hostname:主机名,不包括端口。
  • Location.port:端口号。
  • Location.pathname:URL 的路径部分,从根路径/开始。
  • Location.search:查询字符串部分,从问号?开始。
  • Location.hash:片段字符串部分,从#开始。
  • Location.username:域名前面的用户名。
  • Location.password:域名前面的密码。
  • Location.origin:URL 的协议、主机名和端口。
  1. // 当前网址为
  2. // http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
  3. document.location.href
  4. // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
  5. document.location.protocol
  6. // "http:"
  7. document.location.host
  8. // "www.example.com:4097"
  9. document.location.hostname
  10. // "www.example.com"
  11. document.location.port
  12. // "4097"
  13. document.location.pathname
  14. // "/path/a.html"
  15. document.location.search
  16. // "?x=111"
  17. document.location.hash
  18. // "#part1"
  19. document.location.username
  20. // "user"
  21. document.location.password
  22. // "passwd"
  23. document.location.origin
  24. // "http://user:passwd@www.example.com:4097"

这些属性里面,只有origin属性是只读的,其他属性都可写。

注意,如果对Location.href写入新的 URL 地址,浏览器会立刻跳转到这个新地址。

  1. // 跳转到新网址
  2. document.location.href = 'http://www.example.com';

这个特性常常用于让网页自动滚动到新的锚点。

  1. document.location.href = '#top';
  2. // 等同于
  3. document.location.hash = '#top';

直接改写location,相当于写入href属性。

  1. document.location = 'http://www.example.com';
  2. // 等同于
  3. document.location.href = 'http://www.example.com';

另外,Location.href属性是浏览器唯一允许跨域写入的属性,即非同源的窗口可以改写另一个窗口(比如子窗口与父窗口)的Location.href属性,导致后者的网址跳转。Location的其他属性都不允许跨域写入。

方法

(1)Location.assign()

assign方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

  1. // 跳转到新的网址
  2. document.location.assign('http://www.example.com')

(2)Location.replace()

replace方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

它与assign方法的差异在于,replace会在浏览器的浏览历史History里面删除当前网址,也就是说,一旦使用了该方法,后退按钮就无法回到当前网页了,相当于在浏览历史里面,使用新的 URL 替换了老的 URL。它的一个应用是,当脚本发现当前是移动设备时,就立刻跳转到移动版网页。

  1. // 跳转到新的网址
  2. document.location.replace('http://www.example.com')

(3)Location.reload()

reload方法使得浏览器重新加载当前网址,相当于按下浏览器的刷新按钮。

它接受一个布尔值作为参数。如果参数为true,浏览器将向服务器重新请求这个网页,并且重新加载后,网页将滚动到头部(即scrollTop === 0)。如果参数是false或为空,浏览器将从本地缓存重新加载该网页,并且重新加载后,网页的视口位置是重新加载前的位置。

  1. // 向服务器重新请求当前网址
  2. window.location.reload(true);

(4)Location.toString()

toString方法返回整个 URL 字符串,相当于读取Location.href属性。

URL 的编码和解码

网页的 URL 只能包含合法的字符。合法字符分成两类。

  • URL 元字符:分号(;),逗号(,),斜杠(/),问号(?),冒号(:),at(@),&,等号(=),加号(+),美元符号($),井号(#
  • 语义字符:a-zA-Z0-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 A5E8 8A 82,将每个字节前面加上百分号,就构成了 URL 编码。

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

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

encodeURI()

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

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

encodeURIComponent()

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

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

上面代码中,encodeURIComponent()会连 URL 元字符一起转义,所以如果转码整个 URL 就会出错。

decodeURI()

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

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

decodeURIComponent()

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

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

URL 接口

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

构造函数

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

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

上面示例生成了一个 URL 实例,用来代表指定的网址。

除了字符串,URL()的参数也可以是另一个 URL 实例。这时,URL()会自动读取该实例的href属性,作为实际参数。

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

  1. var url1 = new URL('index.html', 'http://example.com');
  2. url1.href
  3. // "http://example.com/index.html"
  4. var url2 = new URL('page2.html', 'http://example.com/page1.html');
  5. url2.href
  6. // "http://example.com/page2.html"
  7. var url3 = new URL('..', 'http://example.com/a/b.html')
  8. url3.href
  9. // "http://example.com/"

上面代码中,返回的 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:返回域名前面的用户名
  1. var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');
  2. url.href
  3. // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
  4. url.protocol
  5. // "http:"
  6. url.hostname
  7. // "www.example.com"
  8. url.host
  9. // "www.example.com:4097"
  10. url.port
  11. // "4097"
  12. url.origin
  13. // "http://www.example.com:4097"
  14. url.pathname
  15. // "/path/a.html"
  16. url.search
  17. // "?x=111"
  18. url.searchParams
  19. // URLSearchParams {}
  20. url.hash
  21. // "#part1"
  22. url.password
  23. // "passwd"
  24. url.username
  25. // "user"

这些属性里面,只有origin属性是只读的,其他属性都可写,并且会立即生效。

  1. var url = new URL('http://example.com/index.html#part1');
  2. url.pathname = 'index2.html';
  3. url.href // "http://example.com/index2.html#part1"
  4. url.hash = '#part2';
  5. url.href // "http://example.com/index2.html#part2"

上面代码中,改变 URL 实例的pathname属性和hash属性,都会实时反映在 URL 实例当中。

静态方法

(1)URL.createObjectURL()

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

  1. // HTML 代码如下
  2. // <div id="display"/>
  3. // <input
  4. // type="file"
  5. // id="fileElem"
  6. // multiple
  7. // accept="image/*"
  8. // onchange="handleFiles(this.files)"
  9. // >
  10. var div = document.getElementById('display');
  11. function handleFiles(files) {
  12. for (var i = 0; i < files.length; i++) {
  13. var img = document.createElement('img');
  14. img.src = window.URL.createObjectURL(files[i]);
  15. div.appendChild(img);
  16. }
  17. }

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

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

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

注意,每次使用URL.createObjectURL()方法,都会在内存里面生成一个 URL 实例。如果不再需要该方法生成的 URL 字符串,为了节省内存,可以使用URL.revokeObjectURL()方法释放这个实例。

(2)URL.revokeObjectURL()

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

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

  1. var div = document.getElementById('display');
  2. function handleFiles(files) {
  3. for (var i = 0; i < files.length; i++) {
  4. var img = document.createElement('img');
  5. img.src = window.URL.createObjectURL(files[i]);
  6. div.appendChild(img);
  7. img.onload = function() {
  8. window.URL.revokeObjectURL(this.src);
  9. }
  10. }
  11. }

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

URLSearchParams 对象

概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

URLSearchParams.toString()

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

  1. var url = new URL('https://example.com?foo=1&bar=2');
  2. var params = new URLSearchParams(url.search);
  3. params.toString() // "foo=1&bar=2'

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

  1. var params = new URLSearchParams({version: 2.0});
  2. window.location.href = location.pathname + '?' + params;

上面代码中,location.href赋值时,可以直接使用params对象。这时就会自动调用toString方法。

URLSearchParams.append()

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

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

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

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

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

URLSearchParams.delete()

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

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

URLSearchParams.has()

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

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

URLSearchParams.set()

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

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

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

上面代码中,foo是已经存在的键,bar是还不存在的键。

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

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

下面是一个替换当前 URL 的例子。

  1. // URL: https://example.com?version=1.0
  2. var params = new URLSearchParams(location.search.slice(1));
  3. params.set('version', '2.0');
  4. window.history.replaceState({}, '', location.pathname + `?` + params);
  5. // URL: https://example.com?version=2.0

URLSearchParams.get(),URLSearchParams.getAll()

get()方法用来读取查询字符串里面的指定键。它接受键名作为参数。

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

两个地方需要注意。第一,它返回的是字符串,如果原始值是数值,需要转一下类型;第二,如果指定的键名不存在,返回值是null

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

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

上面代码中,查询字符串有三个foo键,get方法返回最前面的键值3

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

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

上面代码中,查询字符串有两个foo键,getAll返回的数组就有两个成员。

URLSearchParams.sort()

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

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

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

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

URLSearchParams.keys(),URLSearchParams.values(),URLSearchParams.entries()

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

  1. var params = new URLSearchParams('a=1&b=2');
  2. for(var p of params.keys()) {
  3. console.log(p);
  4. }
  5. // a
  6. // b
  7. for(var p of params.values()) {
  8. console.log(p);
  9. }
  10. // 1
  11. // 2
  12. for(var p of params.entries()) {
  13. console.log(p);
  14. }
  15. // ["a", "1"]
  16. // ["b", "2"]

如果直接对URLSearchParams进行遍历,其实内部调用的就是entries接口。

  1. for (var p of params) {}
  2. // 等同于
  3. for (var p of params.entries()) {}

参考链接