翼度科技»论坛 编程开发 JavaScript 查看内容

编码揭秘:解构字符%20背后的秘密与百分号编码艺术

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
前言

提到这个 %20,想必大家都见过,熟悉一点编码的人,还会知道这玩意就是空格转换而来! 那么我们一起破解, 如何编码而来?
我们今天继续学习前端编码知识, 其他编码文章:
之后再补上

  • UTF-16 编码
  • UTF-8 编码
前端所需要的基本编码知识体系就基本形成。
更多前端基础进阶知识,可以

  • 关注专栏 前端基础进阶,
  • 关注公众号成长的程序世界,
  • 进交流群dirge-cloud
Unicode基础知识

Unicode 只是一个字符集, 其为每个字符提供了一个编号,我们称之为码点
Unicode 可以使用的编码有三种,分别是:
UFT-8:一种 变长的编码方案,使用 1~6 个字节来存储。
UTF-16:对于码点小于0xFFFF(65535)的字符,两个字节存储,反之采用 4个字节来存储。
UFT-32:一种 固定长度的编码方案,不管字符编号大小,始终使用 4 个字节来存储。
所以UTF-8个UTF-16都属于变长编码方案,而UTF-32属于固定长度编码方案。
固定长度编码方案优点当然是简单啊,缺点嘛,费空间, 这就是为嘛还要有UTF-16和UTF-8。
我们网络传输常用 UTF-8, 而javascript运行时的字符编码是 UTF-16.
%20怎么来的

我们看看,我们怎么样可以得到这个%20:
  1. escape(" ")              "%20"
  2. encodeURI(" ")           "%20"
  3. encodeURIComponent(" ")  "%20"
复制代码
其是字符的16进制格式值, 是百分号编码,之后会细说。
怎么获得这个编码,写一个简单的方法你就懂了
  1. function to16Format(ch){
  2.     return '%' + ch.codePointAt(0).toString(16)
  3. }
  4. to16Format(" ")  //  "%20"
复制代码
虽然3个方法都能获得同样的值,
很少有人告诉你 esacpe是基于UTF-16,而另外两个是基于 UTF-8, 看个例子:
0-0xFF码点范围编码结果是一致的,
0xFF以上,结果就不一样了, 原理我们后面说。
[code]escape("")         //%20encodeURI("")      //%20escape("人")       // "%u4EBA" encodeURI("人")    // "%E4%BA%BA"escape("
来源:https://www.cnblogs.com/cloud-/p/18095685
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具