URL 是互联网的基础设施之一。浏览器提供了一些原生对象,用来管理 URL。
1. Location 对象
Location
对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。通过window.location
和document.location
属性,可以拿到这个对象。
1.1 属性
Location
对象提供以下属性。
Location.href
:整个URL。Location.protocl
:当前URL的协议,包括冒号(:
)。Location.host
:主机,如果端口不是协议默认的80
和443
,则还会包括冒号(:
)和端口。Location.hostname
:主机名,不包括端口。Location.port
:端口号。Location.pathname
:URL路径部分,从根路径/
开始。Location.search
:查询字符串部分,从问号?
开始。Location.hash
:片段字符串部分,从#
开始。Location.username
:域名前面的用户名。Location.password
:域名前面的密码。Location.origin
:URL的协议,主机名和端口。
注意:上述属性,只有origin
属性是只读的,其他的都可写。
如果对Location.href
写入新的URL地址,浏览器会立刻跳转到新地址。
document.location.href = "http://www.baidu.com" //会跳转到百度首页
直接改写Location
,相当于写入href
属性。
document.location = "http://www.baidu.com";
//相当于
document.location.href = "http://www.baidu.com";
1.2 方法
(1)Location.assign()
assign
方法,接受一个URL字符串作为参数,使得浏览器立刻跳转到新的URL。如果参数不是有效的URL字符串,则会报错。
// 跳转到百度首页
document.location.assign("http://www.baidu.com");
(2)Location.replace()
replace
方法,接受一个URL字符串作为参数,使得浏览器立刻跳转到新的URL。如果参数不是有效的URL字符串,则会报错。
它与assign
方法的差异在于,replace
会在浏览器的浏览历史History
里面删除当前网址。一旦使用了该方法,后退按钮就无法回到当前网页了,相当于在浏览历史里面,使用新的URL替换了老的URL。
// 跳转到百度首页,并且从history中删除当前网址
document.location.replace("http://www.baidu.com");
(3)Location.reload()
reload
方法,使得浏览器重新加载当前网址,相当于按下浏览器的刷新按钮。
它接受一个布尔值作为参数,参数为true
,浏览器重新向服务器请求网页,并且重新加载后网页将滚动到头部;如果参数为为false
或者为空,浏览器将从本地缓存重新加载该网页,并且重新加载后,网页视口位置将是加载前的位置。
//向服务器重新请求当前网页,并且网页加载后滚动到头部。
document.location.reload(true);
//从本地缓存中重新加载当前网页,并且重新加载后,网页视口位置将是加载前的位置
document.location.reload(false)
(4)Location.toString()
toString
方法返回整个URL字符串,相当于读取Location.href
Location.href属性。
//当前网页URL为:https://wangdoc.com/javascript/bom/location.html#navbar
document.location.toString(); //https://wangdoc.com/javascript/bom/location.html#navbar
document.location.href; //https://wangdoc.com/javascript/bom/location.html#navbar
2. URL的编码和解码
网页的URL只能包含合法字符,合法字符分两类。
- URL元字符:分号(
;
),逗号(,
),斜杆(/
),问号(?
),冒号(:
),等号(=
),加号(+
),井号(#
),美元符号($
),@
,&
。 - 语义字符:
a-z
,A-Z
,0-9
,连词号(-
),下划线(_
),点(.
),感叹号(!
),波浪线(~
),星号(*
),单引号(’
),圆括号(()
)。
除了以上字符,其他字符出现在URL之中都必须转义,规则是根据操作系统的默认编码,将每个字节转为百分号(%
)加上两个大写的十六进制字母。
JavaScript提供四个URL的编码/解码方法。
encodeURI()
encodeURIComponent()
decodeURI()
decodeUITComponent()
2.1 encodeURI()
encodeURI()
方法用于转码整个URL。它接受一个字符串作为参数,代表整个URL。会将元字符和语义字符之外的字符,都进行转义。
encodeURI("htttp://www.baidu.com?i=春节"); //将春节转义
//"htttp://www.baidu.com?i=%E6%98%A5%E8%8A%82"
2.2 encodeURIComponent()
encodeURIComponent()
方法用于转码URL的组成部分,会转码除了语义字符外的所有字符,即元字符也会被转码。它接受一个参数,就是URL的片段。
encodeURIComponent("春节"); //转义URL组成部分
// "%E6%98%A5%E8%8A%82"
2.3 decodeURI()
decodeURI()
方法用于整个URL的解码。是encodeURI()
的逆运算。接受一个参数,就是转码后的URL。
decodeURI("htttp://www.baidu.com?i=%E6%98%A5%E8%8A%82") // "htttp://www.baidu.com?i=春节"
2.4 decodeURLComponent()
decodeURIComponent()
用于URL 片段的解码。它是encodeURIComponent()
方法的逆运算。它接受一个参数,就是转码后的URL片段。
decodeURIComponent("%E6%98%A5%E8%8A%82") // 春节
3. URL接口
URL
接口是一个构造函数,浏览器原生提供,可以用来构造、解析和编码 URL。一般情况下,通过window.URL
可以拿到这个构造函数。
3.1 构造函数
URL
作为一个构造函数,可以生成URL实例。它接受一个表示URL的字符串作为参数。如果参数是不合法的URL,会报错。
var url = new URL("http://www.baidu.com");
url.href // "http://www.baidu.com"
如果参数是另个一个URL实例,构造函数会自动读取该实例的href
属性,作为实际参数。
3.2 实例属性
URL实例的属性与Location
对象的属性基本一致,返回当前URL的信息。
URL.href
:整个URL。URL.protocl
:当前URL的协议,包括冒号(:
)。URL.host
:主机,如果端口不是协议默认的80
和443
,则还会包括冒号(:
)和端口。URL.hostname
:主机名,不包括端口。URL.port
:端口号。URL.pathname
:URL路径部分,从根路径/
开始。URL.search
:查询字符串部分,从问号?
开始。URL.searchParams
:返回一个URLSearchParams
实例,该属性是Location
对象没有的。URL.hash
:片段字符串部分,从#
开始。URL.username
:域名前面的用户名。URL.password
:域名前面的密码。URL.origin
:URL的协议,主机名和端口。
上述属性,只有origin
属性是只读的,其他的都可写。
4. URLSearchParams对象
4.1 概述
URLSearchParams
对象是浏览器的原生对象,用来构造、解析和处理 URL 的查询字符串(即 URL 问号后面的部分)。
它本身也是一个构造函数,可以生成实例。参数可以为查询字符串,起首的问号?有没有都行,也可以是对应查询字符串的数组或对象。
// 方法一,传入字符串
var params = new URLSearchParams("?f=1&a=2");
// 等同于
var params = new URLSearchParams(document.location.search);
// 方法二,传入数组
var params = new URLSearchParams([["f",1],["a",2]]);
// 方法三,传入对象
var params = new URLSearchParams({"f":1,"a",2});
URLSearchParams
会对查询字符串自动编码。
var params = new URLSearchParams({"a":"你好!"});
params.toString(); // "a=%E4%BD%A0%E5%A5%BD%EF%BC%81"
浏览器向服务器发送表单数据时,可以使用URLSearchParams
实例作为表单数据。
// 创建URLSearchParams实例
const params = new URLSearchParams({"name":"jidi","age":22});
fetch('https://example.com/api', {
method: 'POST',
body: params // 使用URLSearchParams实例作为表单数据发送给服务器
}).then(...)
4.2 URLSearchParams.toString()
toString()
方法返回实例的字符串形式。
var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);
params.toString() // "foo=1&bar=2'
4.3 URLSearchParams.append()
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"
4.4 URLSearchParams.delete()
delete()
方法用来删除指定的查询参数。它接受键名作为参数。
var params = new URLSearchParams({'foo': 1 , 'bar': 2});
// 删除一个指定的查询参数
params.delete('bar');
params.toString() // "foo=1"
4.5 URLSearchParams.has()
has()
方法返回一个布尔值,表示查询字符串是否包含指定的键名。
var params = new URLSearchParams({'foo': 1 , 'bar': 2});
//是否包含指定键名的查询字符串
params.has('bar') // true
params.has('baz') // false
4.6 URLSearchParams.set()
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"
4.7 URLSearchParams.get(),URLSearchParams.getAll()
get()
方法用来读取查询字符串里面的指定键。它接受键名作为参数。
var params = new URLSearchParams('?foo=1');
// 读取指定键名,返回字符串
params.get('foo') // "1"
// 不存在,返回null
params.get('bar') // null
两个地方需要注意。第一,它返回的是字符串,如果原始值是数值,需要转一下类型;第二,如果指定的键名不存在,返回值是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"]
4.8 URLSearchParams.keys(),URLSearchParams.values(),URLSearchParams.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"]
如果直接对URLSearchParams
进行遍历,其实内部调用的就是entries()
接口。
var params = new URLSearchParams('a=1&b=2');
for (var p of params) {}
// 等同于
for (var p of params.entries()) {}