常见问题之JS——Url地址转码与解码

背景

日常我们开发时，我们会遇到各种各样的奇奇怪怪的问题（踩坑o(╯□╰)o），这个常见问题系列就是我日常遇到的一些问题的记录文章系列，这里整理汇总后分享给大家，让其还在深坑中的小伙伴有绳索能爬出来。
同时在这里也欢迎大家把自己遇到的问题留言或私信给我，我看看其能否给大家解决。

开发环境

系统：windows10

内容

我们在日常编写前端代码时常常调用后端接口，而接口大部分都有传参操作，而有一些参数值会和http中使用的关键词冲突，这时我们就需要使用到转码，部分转码工作由浏览器自动化完成，而很多都是需要我们手动接入进行转码。下面是我整理的一些常用的转码方式，整理出来便于大家日常使用。

1、encodeURI和decodeURI

let url = 'http://127.0.0.1:8080/login?uri=http://127.0.0.1:8080/userInfo?id=test001&name=无名';
console.log(url);
console.log(encodeURI(url));

看其打印的情况，我们会发现经过encodeURI处理后的地址发生了转码。同样的，前端接受到这类转码后的地址，我们可以使用decodeURI进行解码回来。
当然，encodeURI也是有局限的，它有一些常见的字符还是无法做到有效转码。

2、encodeURIComponent 和 decodeURIComponent

上面我们使用了encodeURI转码，而&这类字符没有有效转码，没有达到我们想要的效果，这时我们就需要使用到encodeURIComponent ，它可以将; / ? : @ & = + $ , #等这类特殊字符进行转码，这样就可以满足于我们上面的测试代码的使用了，同样的遇到该类的转码后的地址，我们可以使用decodeURIComponent将其解码回来。