js对url编码与解码

在前端工作中，偶尔会遇到url的编码与解码，比如：在微信授权登录的时候，需要将url进行编码写入，再比如：在PC端显示小表情的时候，会用到对url解码解析表情。那么，有哪些编码解码方式呢，常用的是哪些呢？

1.为什么要URL编码

在因特网上传送URL，只能采用ASCII字符集

也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，即只有字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*’()[不包括双引号]、以及某些保留字（空格转换为+），才可以不经过编码直接用于URL，这意味着 如果URL中有汉字，就必须编码后使用。

2.如何编码

URL编码通常也被称为百分号编码（percent-encoding），是因为它的编码方式非常简单：
使用%加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式。URL编码要做的，就是将每一个非安全的ASCII字符都被替换为“%xx”格式，
对于非ASCII字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。
如"中文"使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87，经过Url编码之后得到"%E4%B8%AD%E6%96%87"。

使用Javascript先对URL编码，或者将可以在后台编码的参数编码后再发送给前端使用。然后再向服务器提交，不要给浏览器插手的机会，这样就能保证客户端只用一种编码方法向服务器发出请求！

3.JS的三种编码函数

• encodeURI和 decodeURI
  • 它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。
  • 需要注意的是，它不对单引号’编码
• encodeURIComponent和decodeURIComponent（推荐使用）
  • 它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
  • 因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码
• escape 和 unescape
  • 对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。

4.案例

1. url编码–encodeURIComponent编码url

var Jumpurl = encodeURIComponent(window.location.href);
var appid = 'wx3d15e2600fa7eee3';
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' 
+ appid + '&redirect_uri=' + Jumpurl + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
   		

2. url解码–decodeURIComponent解码表情

var a = '沉默的独白[[%F0%9F%98%81]][[%F0%9F%98%94]][[%F0%9F%98%8A]]';
var b = decodeURIComponent(a);
var c = b.replace(/[\[\]]/g,'');
console.log(b)
console.log(c)