为什么我复制的中文url粘贴出来会是乱码的？ 浏览器url编码和解码

为什么我复制的中文url粘贴出来会是乱码的？ 浏览器url编码和解码

Start

• 番茄最近涉及到一些和单点登录相关的业务需求，在实现功能的过程中，难免少不了和 url 打交道。
• 但是在打交道的过程中，遇到一个痛点：明明我复制的 url 是一个很简短的url，但是粘贴到浏览器的时候，却变成很长一串。
• why？

1. 问题场景

举个例子：番茄我突然有一天心血来潮，想要找一个番茄的图片。于是我打开百度，输入番茄，回车搜索。如下图

可以看到上述截图，我们访问的 url 实际就是 https://www.baidu.com/s?wd=番茄；突然我觉得这个番茄图片特别好看，我想分享给我的小伙伴。于是我复制网站的 url，准备粘贴到我的聊天框中，发送给我的小伙伴。

但是有一个很神奇的现象，我粘贴后的链接，却是这样的：

https://www.baidu.com/s?wd=%E7%95%AA%E8%8C%84

2. 为什么粘贴出来的内容是被转码后的内容呢？

别人的讨论的结果

可以看到上述的内容，最关键的一个点就是：

因为 URL 本身就不支持中文，所有中文字符都要经过 URL 编码之后才可以传输

如何验证他说的话呢？

打开浏览器控制台，查看 network 选项，刷新页面。在调用接口的时候，发现访问的 url 是被转码后的内容了。如下图：

所以，转义的原因是：

URl 本身就不支持某些字符，在进行传输的时候，它会经过 URL 编码。

3. 转码相关的疑问

3.1 那些会被转义

对歧义性的数据进行 URL 百分号编码。

3.2 url转义字符原理：

将这些特殊的字符转换成ASCII码，格式为：%加字符的ASCII码，即一个百分号%，后面跟对应字符的ASCII（16进制）码值。例如 空格的编码值是"%20"。

3.3 URL特殊字符需转义

1、空格换成加号(+)
2、正斜杠(/)分隔目录和子目录
3、问号(?)分隔URL和查询
4、百分号(%)制定特殊字符
5、#号指定书签
6、&号分隔参数

3.4 中文字符转义原理

待补充

4. JS中如何实现解码和编码

4.1 解码

decodeURI()
decodeURIComponent()

4.2 编码

encodeURI()
encodeURIComponent()

4.3 中文解释

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

4.4 使用示例

/* 1.基础编码 */
console.log(encodeURI('番茄'))
// %E7%95%AA%E8%8C%84
console.log(encodeURIComponent('番茄'))
// %E7%95%AA%E8%8C%84

/* 2.encodeURIComponent支持特殊字符的编码 */
console.log(encodeURI('番茄#'))
// %E7%95%AA%E8%8C%84#
console.log(encodeURIComponent('番茄#'))
// %E7%95%AA%E8%8C%84%23


/* 3.基础解码 */
console.log(decodeURI('%E7%95%AA%E8%8C%84'))
// 番茄
console.log(decodeURIComponent('%E7%95%AA%E8%8C%84'))
// 番茄

/* 4.encodeURIComponent支持特殊字符的解码 */
console.log(decodeURI('%E7%95%AA%E8%8C%84%23'))
// 番茄%23
console.log(decodeURIComponent('%E7%95%AA%E8%8C%84%23'))
// 番茄#

区别： decodeURIComponent() 可以编码和解码URI特殊字符（如#，/，￥等），而 decodeURI()则不能。

End

• 回想起日常工作中经常使用的截取 url 参数的函数。通常会依据?，& 进行参数处理。当时的我就担心，会不会出现多个特殊字符的情况。
• 在对比思考一下这边博客了解到的内容。才发现，担心的情况是会有的，但是会做特殊转义，避免相关问题了。
• 加油