【亡羊补牢】JS灵魂之问 第6期 global对象的编码和解码方法

引言

对于global对象的编码和解码问题，是我们平常见到的，比如一个get请求方法，你把地址发送给你的qq好友后，会发现有一长串的字符串，还有%20等一些奇奇怪怪的编码。此时就有一个问题了，那我发送给那位好友，他去访问这个地址会正确访问那个网页嘛？浏览器会识别嘛？会识别是怎样的转换的呢？

提出问题

我们假设拿到的地址如下所述，那浏览器是怎样进行编码和解码过程呢？调用什么方法？（见后文）

/* global对象的编码和解码方法 */
let uri = 'http://www.yangchaoyi.vip/web index.html?name=chocolate'

编码

/* 编码 */
console.log(encodeURI(uri)) // 只能解析空格
console.log(encodeURIComponent(uri)) // 最常用的编码方式

输出结果：

http://www.yangchaoyi.vip/web%20index.html?name=chocolate
http%3A%2F%2Fwww.yangchaoyi.vip%2Fweb%20index.html%3Fname%3Dchocolate

解码

/* 解码 */
let encodeUri = 'http%3A%2F%2Fwww.yangchaoyi.vip%2Fweb%20index.html%3Fname%3Dchocolate'
console.log(decodeURI(encodeUri)) // 只能解析空格
console.log(decodeURIComponent(encodeUri))

输出结果：

http%3A%2F%2Fwww.yangchaoyi.vip%2Fweb index.html%3Fname%3Dchocolate
http://www.yangchaoyi.vip/web index.html?name=chocolate

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退