编码 - 简书

TextEncoder, TextDecoder(实验中的功能)

base64 编解码

Base64编码作用：由于某些系统中只能使用ASCII字符。Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法。
base64特别适合在http，mime协议下快速传输数据。在前端通常用于图片和icon的编码，

escape/unescape（已废弃 encodeURI替代）

针对宽字符做unicode编码，并针对码值做十六进制编码，所以使用escape针对汉字编码会得到形如”\uxxxx”的结果；
该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换；
document.write(escape("http://www.w3school.com.cn/") + "<br />")
document.write(escape("?!=()#%&"))
输出：
http%3A//www.w3school.com.cn
%3F%21%3D%28%29%23%25%26

encodeURI()/decodeURI()

可把字符串作为 URI 进行编码。（ URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义，如：" ; , / ? : @ & = + $ # "）
该方法不会对 ASCII 字母和数字（A-Z a-z 0-9）进行编码，也不会对这些 ASCII 标点符号进行编码，如： - _ . ! ~ * ' ( ) 。

应用场景：期望获取一个可用的URL地址时，使用此方法进行编码。
document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(";,/?:@&=+$#"))
输出：
http://www.w3school.com.cn/
http://www.w3school.com.cn/My%20first/
;,/?:@&=+$#

若使用 encodeURIComponent进行编码，则无法得到一个可正常工作的链接。可用将编码后的地址，粘贴到浏览器进行验证。
encodeURIComponent("http://www.example.org/a file with spaces.html")
编码结果
http%3A%2F%2Fwww.example.org%2Fa%20file%20with%20spaces.html

encodeURIComponent / decodeURIComponent

encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法，而不用对整个URL进行编码。
在 encodeURI() 中不被编码的符号" ; , / ? : @ & = + $ # "，encodeURIComponent()都会进行编码。（可以观察到，都是一些常见的网络协议标志，如，“/@?&#'”）
该方法不会对 ASCII 字母和数字（A-Z a-z 0-9）进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

提示和注释
提示：请注意 encodeURIComponent() 函数与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
应用场景：当需要对URL的参数进行编码时，使用encodeURIComponent()。
document.write(encodeURIComponent("http://www.w3school.com.cn/"))
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write(encodeURIComponent(",/?:@&=+$#"))
输出：
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

encodeURI与encodeURIComponent 不同点

1、对字符的编码方式不同。可参考下图

20210723082030.png

2、应用场景不同
url里面的query 如果有类似username='a&foo=boo'这种，由于服务器根据&和=来识别query的key和value，就会产生歧义。
a&foo=boo需要被当成一个整体，所以需要用encodeURI去转义；
encodeURIComponent转义范围更大；

charCodeAt() / fromCharCode()

对字符进行 Unicode 编码、解码。
不足： 采用\uxxxx表示一个字符，其中xxxx表示字符码点；但只限于\u0000—\uFFFF之间的字符，超出这个范围的字符，将用2个双字节形式表示；如：\uD824\uDFB7 表示“吉”；
如果\u后面是超过0xFFFF的数值（如：\u20BB7），JS将理解为\u20BB+7。返回值为“ 7”；

codePointAt() / fromCodePoint()

可识别32位的UTF-16字符；ES6只要将码点放入大括号，就能正确解读该字符串；如：\u{20BB7} 表示“吉”；
大括号表示法与4个字符的UTF-16等价：如：

\u{20BB7} === \uD842\uDFB7    //  true

ES6的codePointAt，可以正确处理4个字节存储的字符，返回一个字符码点；
codePointAt返回的码点是十进制值，要转成16进制，可用toString方法；
如：s.codePointAt(0).toString(16);
应用： 判断一个字符是由2个字节还是4个字节组成；

function is32Bit(c){
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit('吉') //  true
is32Bit('a')  //  false