在前端工作中,偶尔会遇到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.案例
- 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'
- 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)