为什么中文名称的图片关上后网址是一串乱码？为什么好好的短网址复制粘贴就变长了一大长串？罪魁祸首竟然是……
杭州终于出梅了！二狗子看到气象台公布的音讯，开心的不得了。杭州的雨从五月底始终下，每天除了雨还是雨，天空都是灰蒙蒙的，都快把人搞抑郁了。出梅了，天晴了，二狗子的心也随着蓝天上的白云浮荡进来了。
共事小峰峰通知二狗子，公司后边的皇后公园，向日葵开的正好，一大片一大片的绵延进来，阳光下金灿灿的，可难看了。“要不要一起去看看？你拍点照片给婷婷呗~”
二狗子一想起女神婷婷很喜爱向日葵，拍点漂亮的照片，能看到婷婷甜甜的笑，就急不可待地拉着小峰峰往公园跑。
二狗子拍了好多照片，精挑细选了好几张，上传到本人的图片网站了。他用浏览器关上图片看了看，没有问题，十分完满，就复制了图片地址发给婷婷。
二狗子有点难堪，明明在浏览器中是失常显示的 URL 地址，怎么复制进去就变成一堆奇怪的字符了呢？
二狗子百思不得其解，得，还是问一下本人的存储服务商——无所不能的又拍云吧。
客服乔巴接待了二狗子，并通知了二狗子这个问题的由来。
URL – 网络资源定位符
通过互联网来拜访网络中资源的时候，最常见就是通过浏览器输出资源的 URL 地址来进行拜访。
URL（Uniform Resource Locator），是互联网中的一个外围概念，官网名称叫做对立资源定位符。简略的来说，URL 就是一个由网站开发者给资源在互联网上调配的地址。一般来说，每个无效的 URL 都指向独自的一个资源，这个资源能够是 HTML 页面、CSS 文档，又或者是一幅图像等。
一个 URL 由不同的局部组成，其中一些是必须的，而另一些是可选的。上面咱们来看下 URL 的具体组成部分：
上图就是残缺的 URL 构造展现。很多时候其中的一些局部是用不到的，例如 user information。作为参考，咱们能够来看一下又拍云存储的 URL 地址。
https://www.upyun.com/product…
- https://，申请协定（scheme），指定了浏览器须要应用何种协定来与指标服务器进行通信。常见的协定有 HTTP 和 HTTPS。
- www.upyun.com，域名（host），表明申请的资源所在的服务器地址。
- /products/file-storage，资源门路地址（path），服务器通过门路来确认拜访资源在服务器上的哪个地位。
个别常见的 URL 地址由这三个局部组成，其余的局部依据开发的须要，能够进行自定义。
理解 URL 的概念后，就晓得二狗子的图片链接 http://fileupload-upyun.test…. 的由来了。通过这个地址，婷婷能够拜访到二狗子服务器上拍摄的向日葵图片。然而，为什么二狗子复制了浏览器地址栏中的地址，发送给婷婷的时候，URL 却变成了 http://fileupload-upyun.test…. 了呢？
奇怪的字符 – URL 编码
咱们能够看到，二狗子发给婷婷的链接，扭转了的局部属于 URL 的 path 局部，而且，英文局部其实没有改变，只有中文的局部被转成 %XX 的这种编码格局了。
尽管，这不会影响图片的关上，地址仍旧是无效的。然而为什么浏览器要把中文转换成这种奇怪的模式呢？
咱们先来看一个例子。如果拜访上面这个 URL 链接：
https://www.baidu.com/s?wd=?#!
这是应用百度进行搜寻的一个链接，/s 前面跟着的 ? 代表申请参数（query），也就是咱们想向申请的服务器提交一些参数。wd 为百度规定的查问参数名，wd 后边跟着的就是须要搜寻的内容。
咱们想搜寻 ?#! 这个内容，可是当你复制这个链接放在浏览器中关上时，会发现一个问题，百度仅仅是搜寻了 ? 这个内容，#! 不见了。
为什么呢？如果你认真看下面那张 URL 的形成图，会发现 URL 构造中还有一个锚点（fragment）的局部，分隔符号就是 #。
所以这里就会呈现一个问题，咱们的业务需要是将 # 当做一个一般文原本进行搜寻，然而 # 在 URL 中有特定的意思，所以浏览器就遇到了一个解释歧义的问题。
这就引申出一个问题，URL 在数据传递中， 如果存在用作分隔符等特殊作用的保留字符怎么办？
在理论的业务场景中，会常常碰到一些在 URL 中有歧义性的数据，为了防止解释谬误，开发者想出了一个解决办法，就是对这些数据进行肯定的解决，从而解决歧义的问题。解决的办法有很多种，最罕用的解决形式，就是对歧义性的数据进行 URL 百分号编码。
哪些是会引起歧义的数据呢？
依据 RFC 3986（https://tools.ietf.org/html/r…）的规定，咱们能够失去上面的后果。
- 不在 ASCII 码范畴内的字符（URL 应用 ASCII 码进行编解码）
- ASCII 码中不可显示的字符
- URL 中规定的保留字符
- 不平安字符（传输环节中可能会被不正确处理），如空格、引号、尖括号等
保留字符由组件分隔符（gen-delims）和子组件分隔符（sub-delims）组成，这些字符在 URL 中都有非凡的意义：
Reserved = gen-delims / sub-delims
- gen-delims = “:” / “/” / “?” / “#” / “[” / “]” / “@”
- sub-delims = “!” / “$” / “&” / “‘” / “(” / “)” / “*” / “+” / “,” / “;” / “=”
URL 中能够间接应用的非保留字符则有：
Unreserved = ALPHA / DIGIT / “-” / “.” / “_” / “~”
- ALPHA：%41 – %5A AND %61 – %7A（英文字母大写 A-Z 以及英文字小写 a-z）
- DIGIT：%30 – %39（数字 0-9）
- -: %2D .: %2E _: %5F
- ~: %7E（某些服务实现将其作为保留字符，个别也须要进行编码解决）
这下子咱们就理解了，为什么 URL 中有时会呈现奇怪的字符，很多时候浏览器会主动帮咱们做编码和解码的操作。就像“向日葵”的 URL 一样，中文局部因为并不在 ASCII 码中，于是浏览器进行 URL 百分号编码的模式来进行拜访。
（又拍云服务名的非法范畴就是在非保留字符中获取，而不能指定为任意字符）
编码的模式
最常见的编码模式就是百分号编码（pct-encoded），这也是浏览器默认的编码模式。
pct-encoded = “%” HEXDIG HEXDIG
百分号编码一个保留字符, 首先须要把该字符的 ASCII 的值示意为两个 16 进制的值, 而后在其后面搁置转义字符（%）。对于非 ASCII 字符, 则须要转换为 UTF-8 字节序, 而后每个字节依照上述形式示意。
（感兴趣的同学能够参考百分号编码 https://zh.wikipedia.org/zh-h… 条目）
各个编程语言中也有绝对应的办法能够进行百分号编码，例如 JavaScript 中就提供了多种编码方法，罕用的有 encodeURI 和 encodeURIComponent 两个办法。
乔巴说，在日常开发应用中，咱们应用的开发库对 URL 编码的判断规范可能并不相同，这是因为这些库所面临的网络环境中，对于特殊字符的平安解决策略各有判断，这也会导致 URL 中如果存在一些特殊字符，开发、拜访过程中可能就会呈现一些奇怪的问题。在这里也倡议大家应用非保留字符来设计本人程序中 URL 局部，防止一些不必要的 BUG 产生。
听完乔巴的介绍，二狗子终于明确了为啥 URL 中呈现这些奇怪的字符了。嘿嘿，这下能够和婷婷解释 URL 为什么这么长咯。
举荐浏览
从 301 跳转，聊聊边缘规定的那些小妙用
企业如何高效安稳实现数据迁徙