1.背景
在电脑术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。
统一资源定位符(或称统一资源定位器/定位地址、URL地址等,英语:Uniform / Universal Resource Locator,常缩写为URL),有时也被俗称为网页地址。如同在网络上的门牌,是因特网上标准的资源的地址(Address)
URL是一种具体的URI,它是URI的一个子集,它不仅唯一标识资源,而且还提供了定位该资源的信息。URI 是一种语义上的抽象概念,可以是绝对的,也可以是相对的,而URL则必须提供足够的信息来定位,是绝对的。
网页的 URL 只能包含合法的字符。合法字符分成两类。
- URL 元字符:分号(;),逗号(,),斜杠(/),问号(?),冒号(:),at(@),&,等号(=),加号(+),美元符号($),井号(#)
- 语义字符:a-z,A-Z,0-9,连词号(-),下划线(_),点(.),感叹号(!),波浪线(~),星号(*),单引号('),圆括号(())
除了以上字符,其他字符出现在 URL 之中都必须转义,规则是根据操作系统的默认编码,将每个字节转为百分号(%)加上两个大写的十六进制字母。
比如,UTF-8 的操作系统上,https://www.baidu.com/s?ie=UTF-8&wd=中国这个 URL 之中,汉字“中国”不是 URL 的合法字符,所以被浏览器自动转成https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD。“中”转成了%E4%B8%AD,“国” 转成了 %E5%9B%BD。这是因为“中”和“国”的 UTF-8 编码分别是E4 B8 AD和E5 9B BD,将每个字节前面加上百分号,就构成了 URL 编码。
2.encodeURI 和 encodeURIComponent
encodeURI()
方法用于转码整个 URL。它的参数是一个字符串,代表整个 URL。它会将元字符和语义字符之外的字符,都进行转义。示例如下:
encodeURI("http://cfz.me?username=hello @风筝");
// "http://cfz.me?username=hello%20@%E9%A3%8E%E7%AD%9D"
encodeURIComponent( )方法用于转码 URL 的组成部分,会转码除了语义字符之外的所有字符,即元字符也会被转码。所以,它不能用于转码整个 URL。它接受一个参数,就是 URL 的片段。示例如下:
// 对URL中的特殊编码字符部分进行转码
'https://www.baidu.com/s?ie=UTF-8&wd='+encodeURIComponent('风筝')
//"https://www.baidu.com/s?ie=UTF-8&wd=%E9%A3%8E%E7%AD%9D"
// 对URL中的回调链接进行转码
'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')
//"https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"
注:encodeURI和encodeURIComponent 的区别
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!*()'
如果用encodeURIComponent 方法转码整个URL 会导致encodeURIComponent()
转码过后的URL无法直接访问;所以encodeURIComponent()
一般用于转码URL的部分参数;
编码URL中的参数的时候,使用encodeURIComponent。
let param = "http://www.cnblogs.com/ym-kite/"; //param为参数
param = encodeURIComponent(param);
const url = "http://www.cnblogs.com?next=" + param;
// http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fym-kite%2F
2. decodeURI 和 decodeURIComponent
decodeURI()
、decodeURIComponent()
用于URL 片段的解码。它们分别是encodeURI()
、encodeURIComponent()
方法的逆运算,两个解码方法只接受一个入参,就是转码后的字符串;示例如下:
例如:
//decodeURI
decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD")
//输出: https://www.baidu.com/s?ie=UTF-8&wd=中国
//decodeURIComponent
decodeURIComponent("http%3A%2F%2Fwww.test.com%2F")
//输出:"http://www.test.com/"
3.escape 和 unescape
escape 与 encodeURI 和 encodeURIComponent 类似,都是对字符串进行编码。不同点在于该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号(即: * @ - _ + . / )进行编码,其他所有的字符都会被转义序列替换。
encodeURI("hello @风筝");// 编码了空格、中文
// "hello%20@%E9%A3%8E%E7%AD%9D"
console.log(encodeURIComponent("hello @风筝")); // 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D
console.log(escape("hello @风筝"));// 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D
如上,encodeURI 和 encodeURIComponent 的编码结果几乎是一致的,但 escape 的中文编码却大相径庭。unescape 是 escape 的反函数,作用是用于解码 escape 编码后的字符串。
4.btoa 和 atob
btoa:将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串。
atob:将已经被base64编码过的数据进行解码。
注意:因为btoa仅将ascii字符串或二进制数据进行编码,不能作用于unicode字符串,所以对中文的base64编码会报错:
btoa("hello @风筝");
// InvalidCharacterError: 'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.
如果要对中文进行base64编码,只需要将中文进行 encodeURIComponent 进行编码之后再进行 base64编码即可。
btoa(encodeURIComponent("hello @云淡然"));
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="
完整的utf8编码字符串进行base64编码示例:
// 完整的utf8字符串base64编码与解码
function uft8ToBase64(utf8) {
return btoa(encodeURIComponent(utf8));
}
function base64ToUtf8(base64) {
return decodeURIComponent(atob(base64));
}
var base64 = uft8ToBase64("hello @云淡然");
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="
base64ToUtf8(base64);
// "hello @云淡然"
应用场景:
/** 记录当前搜索参数到url中 */
const keepParams = (params: CommonSearchParams) => {
const data = {
type: isSimple.value ? 'simple' : 'advanced',
params,
total: totalNum.value,
};
lockWatch = true;
router.replace({
name: 'home',
query: {
// 先转为json字符串,再转为base64;注意:btoa不支持直接编码中文字符,先encode中文
data: btoa(encodeURIComponent(JSON.stringify(data))),
},
}).finally(() => {
nextTick(() => {
lockWatch = false;
});
});
};