网站策划界面效果感受心得,怎么查询最新网站,今天的新闻报道,网页游戏宣传片排行榜在开发中经常需要对用户输入的数据进行编码然后才能通过HTTP请求发送给后台#xff0c;或者对传递过来的数据进行解码。在JS中原生提供了三种编码/解码方式#xff0c;分别是 encodeURI、 encodeURIComponent和 escape。
为什么URL需要编码#xff1f;
URI设计要求可移植或者对传递过来的数据进行解码。在JS中原生提供了三种编码/解码方式分别是 encodeURI、 encodeURIComponent和 escape。
为什么URL需要编码
URI设计要求可移植其中包括安全传输、方便阅读、完整性。
安全传输不能在传递过程中有些信息被过滤掉 方便阅读不能有空白字符 完整性不能有的字符表示不了内容例如中文
结合考虑URL使用ASCII字符集而这个字符集是有限的怎么表示无限的字符呢并且ASCII中还有些被URL保留例如#、、、/等。
这时候就需要编码编码规则是使用使用%加上两个表示字符ASCII码的16进制数。
例如
~ 对应 126 对应 0x7E 对应 %7E 空格 对应 32 对应 0x20 对应 %20
并且我们知道ASCII是用一个字节表示的一个可以表示256个字符2的8次方一个8bit。
但是汉字这显然是不够的有的时候需要3个字节来表示所以encodeURIComponent(中)就变成了%E4%B8%AD
encodeURI
该方法不会对ASCII表中的字母和数字编码同时也不会对ASCII中的标点符号编码 -_.~*’() 在URI中具有特殊含义的符号 **;/?$,#**同样不会被编码。
var url https://google.com/pathname?a1babcdec黄山#hash;
encodeURI(url); // 返回 https://google.com/pathname?a1babcdec%E9%BB%84%E5%B1%B1#hashencodeURI(-_.~*()); // 返回 -_.~*()encodeURI(;/?:$,#); // 返回 ;/?:$,#encodeURIComponent
该方法相比encodeURI多编码URI中具有特殊含义的符号 ;/?$,#
var url https://google.com/pathname?a1babcdec黄山#hash;
encodeURIComponent(url); // 打印 https%3A%2F%2Fgoogle.com%2Fpathname%3Fa%3D1%26b%3Dabcde%26c%3D%E9%BB%84%E5%B1%B1%23hashencodeURIComponent(-_.~*()); // 返回 -_.~*()encodeURIComponent(;/?:$,#); // 返回 %3B%2F%3F%3A%40%26%3D%2B%24%2C%23通过对比可看出方法encodeURI和encodeURIComponent编码中文的返回结果是一样的。
encodeURI(黄山); // 返回 %E9%BB%84%E5%B1%B1encodeURIComponent(黄山); // 返回 %E9%BB%84%E5%B1%B1escape不推荐使用推荐使用上面两个方法代替
该方法会对ASCII中 *字母、数字及符号-_./**之外的所有字符进行编码。
var url https://google.com/pathname?a1babcdec黄山#hash;
escape(url); // 返回 https%3A//google.com/pathname%3Fa%3D1%26b%3Dabcde%26c%3D%u9EC4%u5C71%23hashconsole.log(escape(*-_./)); // 打印 *-_./escape对于汉字的编码和上面两个方法的编码结果并不一样。
encodeURI(黄山); // 返回 %E9%BB%84%E5%B1%B1encodeURIComponent(黄山); // 返回 %E9%BB%84%E5%B1%B1escape(黄山); // 返回 %u9EC4%u5C71#解码
三种编码方法对应的解码方法分别是
编码解码encodeURIdecodeURIencodeURIComponentdecodeURIComponentescapeunescape
var res encodeURI(黄山); // %E9%BB%84%E5%B1%B1
decodeURI(res); // 返回 黄山var res encodeURIComponent(黄山); // %E9%BB%84%E5%B1%B1
decodeURI(res); // 返回 黄山var res escape(黄山); // %u9EC4%u5C71
unescape(res); // 返回 黄山
