Grimoire

# 前端编码

# Base64

一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码

应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景

api:

  • atob: base64 -> 二进制
  • btoa: base64 <- 二进制

一个 base64 字符代表 6bit，三字节的二进制文件可以转换成 四字节的 base64 字符，意味着转换后的体积是原始的 133%

为什么使用 base64

  • 二进制可能在传输过程中出现不兼容而造成错误，所以使用 base64 编码
  • 每个小图片都会发起 http 请求，转换成 base64 就不会发送请求，但是对于体积大的图片如果编码到 html/CSS 页面解析时间会变长，阻塞渲染关键路径，影响页面打开速度，直接使用链接不会阻塞网页渲染

# escape 已废弃

生成新的由十六进制转义序列替换的字符串

escape("abc123"); // "abc123"
escape("äöü"); // "%E4%F6%FC"
escape("ć"); // "%u0107"

// special characters
escape("@*_+-./"); // "@*_+-./"

// 解码
unescape();
1
2
3
4
5
6
7
8
9

使用 encodeURI 或 encodeURIComponent 代替.

# encodeURI

通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)。

下面的字符不会编码

  • 保留字符：; , / ? : @ & = + $
  • 非转义字符：字母 数字 - _ . ! ~ * ' ( )
  • 数字符号：#

无法产生能适用于 HTTP GET 或 POST 请求的 URI (因为 "&", "+", 和 "=" 不会被编码) 使用 encodeURIComponent 可以编码

encodeURI("测试 123 asd ?#"); // "%E6%B5%8B%E8%AF%95%20123%20asd%20?#"
// 解码
decodeURI("%E6%B5%8B%E8%AF%95%20123%20asd%20?#");
1
2
3

# encodeURIComponent

encodeURI 加强版，除了非转义字符其他的都会编码

← 双向绑定 →