前端常用的url编码方式

2023-08-10 15:15| 来源: 网络整理| 查看: 265

1.为什么需要编码？

一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。比如，世界上有英文字母的网址"http://www.abc.com"，但是没有希腊字母的网址"http://www.aβγ.com"（读作阿尔法-贝塔-伽玛.com）。这是因为网络标准RFC 1738做了硬性规定（只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。）

这意味着，如果URL中有汉字或者其他特殊字符，就必须编码后使用。但是麻烦的是，RFC 1738没有规定具体的编码方法，而是交给浏览器自己决定。这导致不同浏览器对特殊字符的编码方式不同。

举个例子：

我在谷歌浏览器输入http://www.baidu.com?a=测试，可以发现查询字符串，测试已经被编码成 %E6%B5%8B%E8%AF%95

20190517101910.png

参考阮一峰老师文章关于URL编码,里面介绍使用ie8会出现编码结果不同，由于我的电脑没有ie8,所以没法测试。不过我试了360、搜狗，和谷歌测试的结果一样。而火狐直接显示的是中文：

20190517105233.png

上面只是统一操作系统的浏览器，如果不同操作系统等，肯定会出现其他编码方式。所以我们在使用url的时候需要一个统一的编码方式（即使用Javascript先对URL编码，不用浏览器自己来编码。因为Javascript的输出总是一致的，服务器获取查询参数等数据，再用对应的解码函数进行解码）

2.网络中常见的编码方式

Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。

1. escape() / unescape()

规则：除了ASCII字母、数字、标点符号"@ * _ + - . /"以外，对其他所有字符进行编码(注：空格会被转化为+字符)

注：

escape用来对某个字符串进行编码的，不能直接用于url编码，尽管url也是个字符串。所以如果你需要编码整个URL，那么用decodeURI()是专门着眼于对整个url进行编码的。 ECMAScript v3 反对使用escape()方法，现在已经很少使用，应用使用 decodeURI() 和 decodeURIComponent() 替代它

2. encodeURI() / decodeURI()

用途：encodeURI()是Javascript中真正用来对URL编码的函数。

规则：不会对下列字符编码 ASCII字母数字 ~ ! @ # $ & * ( ) = : / , ; ? + '(注：这是单引号，若果双引号"会被编码%22)进行编码

结果：输出utf-8形式，并且在每个字节前加上%。

3.encodeURIComponent() / decodeURIComponent

用途：与encodeURI()的区别是，它用于对URL的组成部分（如查询参数、路径等）进行个别编码，而不用于对整个URL进行编码。

规则：不会对下列字符编码 ASCII字母数字 ~ ! * ( ) '(注：这是单引号，若果双引号"会被编码%22)进行编码

结果：和encodeURI一样，输出utf-8形式，并且在每个字节前加上%。

3.区别 encodeURIComponent比encodeURI编码的范围更大，即 @ # $ & = : / , ; ? +，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码如果只是编码字符串，不和URL有半毛钱关系，那么用escape。当然该方法已经不推荐使用，所以不用深究 encodeUR用于编码整个URL encodeURIComponent用于编码url中的查询参数或路径等（若参数为url,还是相当于参数，用encodeURIComponent()） 4.测试 console.log(encodeURI("http://www.w3school.com.cn")) console.log(encodeURIComponent("http://www.w3school.com.cn")) console.log(encodeURI("http://www.w3school.com.cn/My first/")) console.log(encodeURI('"')) console.log(encodeURIComponent('"')) console.log(encodeURI("http://www.w3school.com.cn?t="+encodeURIComponent('http://www.w3school.com.cn'))) 输出： http://www.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn http://www.w3school.com.cn/My%20first/ %22 %22 http://www.w3school.com.cn?t=http%253A%252F%252Fwww.w3school.com.cn

参考文章

阮一峰老师文章关于URL编码

简单明了区分escape、encodeURI和encodeURIComponent

【本文地址】

公司简介

联系我们