前端开发中编码和解码是常见的概念，用于处理字符和字符集。在日常开发中编码通常指的是将字符转换为特定格式的字符串，而解码则是将特定格式的字符串转换回字符。字符集则是一组字符的集合，用于表示各种语言和符号。

常见的编码和解码方式包括URL编码（encodeURIComponent和decodeURIComponent）、Base64编码（btoa和atob）、Unicode编码（charCodeAt和fromCharCode）等。这些编码和解码方式可以帮助处理前端应用中的字符转换和传输。

字符集指的是一种字符编码方案，用于表示各种语言和符号的展现，通常在页面上我们用的：常见的字符集包括ASCII、UTF-8、UTF-16等。所以确保使用正确的字符集来处理和显示文本数据非常重要，特别是在处理多语言和国际化应用时，下面详细介绍下具体的知识。

一个汉字、一个拉丁字母、一个数字，世界上各种语言里的“字”和“标点符号”，以及像 ESC、换行这种看不见的控制字符都属于“字符”。一堆字符组成的集合，叫做“字符集”。

计算机存储数据的基本单位是“字节”，也就是Byte。一个字节由 8 个二进制位组成，也就是 8 个比特（bit）。每个比特有 0 和 1 两种状态，8个比特一共有 2^8 个，也就是 256 种不同的状态。所以如果只用一个字节长度来编码字符，那么这个字符集就能容纳 256 个字符。

编码、解码、字符集

  • 计算机底层在保存一切内容时，都需要将其转换为二进制编码进行保存，以比特的形式记录“0”和“1”。
  • 在计算机中显示一个内容时，需要将二进制编码转换为对应的字符
  • 将字符转换为二进制码的过程，称为字符编码
  • 将二进制码转换为字符串的过程，称为解码
  • 编码和解码所遵循的规则，称为字符集


常见的字符集 与 字符编码

  • ASCII
  • 128个英文字符集； 是美国信息交换标准代码

前端之 编码、解码与字符、字符集_字符转换

  • ISO-8859-1
  • 欧洲字符集
  • GB 2312-80
  • 中国简体字符集，2个字节， 2^16 个，共65536个字符（不够用）
  • GBK
  • Guo Biao Kuo zhan （只是一种推荐标准，不是国家标准）
  • 兼容 并扩展了GB2312，ASCII；扩展了繁体字，一共包含2万多个字符
  • Unicode
  • 万国码(统一码)，几乎支持地球上所有的字符 （两万八千多个字符，1114112个码位），还提供了私有区，比如苹果系统专有的。
  • 最常用的是UTF-8编码
  • 官方标准则是根据 ISO/IEC 10646 来制定的。ISO/IEC 10646 跟 Unicode 标准区别不大，码位完全一致，二者几乎可以划等号，只是面向的对象不同。

前端之 编码、解码与字符、字符集_字符编码_02

如果遭遇过的锟斤拷�⊠等各种乱码，那么就是遇到了计算机识别不了的字符集编码方式（错误转码）。 GBK 与 Unicode 激情碰撞之后，噩梦般的上古神器——“锟（kūn）斤拷”就诞生了。

  1. 按照 GBK 编码存储成了这串二进制数字。
  2. 她用最常见的 UTF-8 编码打开，Unicode 就会用这个替换符号�，来展示所有无法正确显示的字符
  3. 保存一下发给室友让她帮忙打开吧。在她点击保存的那一瞬间，文档中所有的�字符，就被根据 UTF-8 编码，编码为了 0xEF BF BD。
  4. 收到这份文件的人，再次使用 GBK 编码打开了这份文档。此时根据 GBK 编码规则，如果有连续两个问号，那么 EFBF、BDEF、BFBD 这三个码位对应的，正是“锟斤拷”三个字。也就是说，连续两个问号，就对应了一个“锟斤拷”，一串问号，就对应了满屏的“锟斤拷”。

前端之 编码、解码与字符、字符集_ico_03

Emoji 冷知识

Emoji 最早只是移动运营商，以及聊天软件们自己开发的。后来随着使用人数越来越多、范围越来越广，微软、苹果、谷歌这些跨国巨头们，向 Unicode 提案，将 emoji 正式加入 Unicode 字符集中，安排在 SMP 中。

值得一提的是，由于 Unicode 只规定 emoji 的含义，不管它们具体长啥样，所以决定你看到的 emoji 长啥样的，是字体。不同操作系统和平台上，使用的 emoji 字体不同，所以你看到的表情符号也不一样。比如， Mac、iPhone上的手机、手表、键盘、鼠标等 emoji 长得都是自家产品的样子，而在 Windows 上就朴实无华得多。

在 Unicode 14.0 中，总共收录了几千个 emoji，包括这些你熟悉的表情，以及不同肤色、发色的人物，各国家的地区的旗帜，各种性别组成的家庭等等。照这个趋势，也不知道 Unicode 未来会不会再收录五口之家、六口之家的 emoji

部分翻译对照

  • 字符 - Character
  • 字符集 - Character Set
  • 字符编码 - Character Encoding
  • 字体 - Font
  • 字形 - Glyph
  • 码位 - Code Point
  • 码空间 – Code Space
  • 乱码 - Mojibake
  • 替换符号 - Replacement Character