转换-前端开发的URL的编码和解码

title: 转换-前端开发的URL的编码和解码 id: 6cb254b41645194d057fd5eff3a72173 tags: [] date: 2000/01/01 00:00:00 updated: 2023/05/29 17:16:18 isPublic: true --#|[分隔]|#--

转换-前端开发的URL的编码和解码

URL的编码和解码，指的是：将文本字符串(URL)编码为一个有效的统一资源标识符 (URI)。

通常我们所说的URL只是URI的一种，URI是统一资源标识的意思。

通常如果一样东西需要编码，说明这样东西并不适合传输。原因多种多样，如Size过大，包含隐私数据；对于Url来说，之所 以要进行编码，是因为Url中有些字符会引起歧义。

网络标准RFC相关文档规定，Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符。

foo://example.com:8042/over/there?name=ferret#nose
   \_/ \______________/ \________/\_________/ \__/
    |          |             |         |        |
  scheme     authority     path      query   fragment

如果不编码，至少会有下面两种问题：

• 分隔标识符不同导致传输数据读取出错的问题：https://www.abc.com/username='a&foo=boo'不编码的话会得到username='a'和foo='boo'。

• 非法字符的不能解读的问题：Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文，否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。

两套编码解法方案

常用的编码和解码方案有两种：

1. encodeURI 和 decodeURI

encodeURI 用于编码，decodeURI 用于解码。

2. encodeURIComponent 和 decodeURIComponent

encodeURIComponent 用于编码，decodeURIComponent 用于解码。

代码示例：

let uri = 'http://www.a_B-c.com/illegal/value.htm?text=跳跳&size=1 3#start'

console.log(uri)
// http://www.a_B-c.com/illegal/value.htm?text=跳跳&size=1 3#start

console.log(encodeURI(uri))
// http://www.a_B-c.com/illegal/value.htm?text=%E8%B7%B3%E8%B7%B3&size=1%203#start

console.log(encodeURIComponent(uri))
// http%3A%2F%2Fwww.a_B-c.com%2Fillegal%2Fvalue.htm%3Ftext%3D%E8%B7%B3%E8%B7%B3%26size%3D1%203%23start

推荐使用第二套，因为第二套编码范围更大，可以对 /:?= 这些进行编码。