云服务器建设简易网站,宁波互联网公司排名,网游大全,大学生电子商务策划书为什么我复制的中文url粘贴出来会是乱码的#xff1f; 浏览器url编码和解码
Start
番茄最近涉及到一些和单点登录相关的业务需求#xff0c;在实现功能的过程中#xff0c;难免少不了和 url 打交道。但是在打交道的过程中#xff0c;遇到一个痛点#xff1a;明明我复制的…为什么我复制的中文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码即一个百分号%后面跟对应字符的ASCII16进制码值。例如 空格的编码值是%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 参数的函数。通常会依据? 进行参数处理。当时的我就担心会不会出现多个特殊字符的情况。在对比思考一下这边博客了解到的内容。才发现担心的情况是会有的但是会做特殊转义避免相关问题了。加油
