URL 如何编码解码？为什么要编码

---

title: URL 如何编码解码？为什么要编码
tags: URL
notebook: 零散知识

---

URL 如何编码解码？为什么要编码

为什么要编码

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

也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，即
只有字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*'()[不包括双引号]、以及某些保留字（空格转换为+），才可以不经过编码直接用于URL
这意味着 如果URL中有汉字，就必须编码后使用。 但是麻烦的是 标准的国际组织并没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。 这导致"URL编码"成为了一个混乱的领域。

如果包含中文，其实会自动编码的，比如Chrome和火狐，"登"、"陆"和"框"的utf-8编码分别是"E7 99 BB E9 99 86 E6 A1 86" ,下图所示的"3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86"就是按照顺序，在每个字节前加上%而得到的:

image

URL 如何编码解码

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"

.+ %20
./ %2F
.? %3F
.% %25
.# %23
.& %26

URL的编码/解码方法

JavaScript提供四个URL的编码/解码方法。
decodeURI() // 编码
decodeURIComponent() //编码
encodeURI() //解码
encodeURIComponent() //解码

区别

encodeURI方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大

示例:
原url：file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#

image

decodeURI()

decodeURI('file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#')
// 输出结果："file:///Users/fanmu/Desktop/demo/3D登陆框/登陆框.html#"

decodeURIComponent()

decodeURIComponent('file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#')
//输出结果为： "file:///Users/fanmu/Desktop/demo/3D登陆框/登陆框.html#"

encodeURI()

encodeURI("file:///Users/fanmu/Desktop/demo/3D登陆框/登陆框.html#")
//输出结果为 ："file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#"

encodeURIComponent()

encodeURIComponent("file:///Users/fanmu/Desktop/demo/3D登陆框/登陆框.html#")
输出结果为: "file%3A%2F%2F%2FUsers%2Ffanmu%2FDesktop%2Fdemo%2F3D%E7%99%BB%E9%99%86%E6%A1%86%2F%E7%99%BB%E9%99%86%E6%A1%86.html%23"