Unicode 编码及其在 Web 前端的应用
内容提要
本文介绍 Unicode 编码及其在前端的应用：Unicode 为全球字符分配唯一码点（U+0000 至 U+10FFFF），常用汉字多位于 BMP 平面；传输时使用 UTF-8、UTF-16、UTF-32 等格式，其中 UTF-8 兼容 ASCII 且变长，UTF-16 对中文更省空间。文章还讲解 HTML、CSS、JavaScript 中的 Unicode 转义方法，以及 charCodeAt 与 codePointAt 的区别。
延伸解读
UTF-8 与 UTF-16 的取舍：中文场景下的空间权衡
文章指出，UTF-8 对 BMP 字符使用 1 到 3 个码元，而 UTF-16 对 BMP 字符固定使用 2 个码元。对于常用汉字（位于 U+0800 到 U+FFFF），UTF-8 需要 3 字节，UTF-16 只需 2 字节。因此，当文件包含大量中文文本时，UTF-16 的体积会显著缩小。但 UTF-8 兼容 ASCII，且是 Web 事实标准，选择时需权衡存储效率与兼容性。
HTML/CSS 转义：统一使用 Unicode 码点
文章强调，无论 HTML 文件采用何种字符编码（如 shift_jis），HTML 转义（€、€、€）使用的都是 Unicode 码点。CSS 转义以反斜杠开头，如 \20AC 或 \0020AC，且需注意空格分隔。这种机制使得开发者可以在不同编码的文档中一致地表示任意字符，也常用于 iconfont 图标显示。
JavaScript 中 charCodeAt 与 codePointAt 的关
对于 BMP 内的字符，charCodeAt 和 codePointAt 返回相同结果。但对于 BMP 外的字符（如“𠮷”），charCodeAt 返回两个 UTF-16 码元（高代理和低代理），而 codePointAt 直接返回完整的 Unicode 码点。因此，处理非 BMP 字符时，应使用 codePointAt 以避免代理对拆分问题，且 codePointAt(1) 对代理对无意义。
Q&A
Unicode 码点的范围是多少？常用汉字在哪个平面？
Unicode 码点范围从 U+0000 到 U+10FFFF，可容纳超过一百万个字符。常用汉字大多位于基本多文种平面（BMP），即平面 0，范围 U+0000 到 U+FFFF。
UTF-8 和 UTF-16 在存储中文时哪个更省空间？为什么？
UTF-16 更省空间。因为常用汉字位于 BMP，UTF-8 需要 3 个字节，而 UTF-16 只需 2 个字节，所以包含大量中文的文本用 UTF-16 编码体积更小。
在 HTML 中如何用 Unicode 码点转义字符？
HTML 中使用 &#x 加十六进制码点加 ; 或 &# 加十进制码点加 ; 来转义，例如 € 或 € 表示欧元符号。转义标志是 &，无论 HTML 文件本身使用何种编码，转义都基于 Unicode 码点。
JavaScript 中 charCodeAt 和 codePointAt 有什么区别？
在 BMP 内，两者返回相同结果。对于 BMP 外的字符（如 emoji），charCodeAt 返回 UTF-16 代理对的码元，需要分两次获取；而 codePointAt 直接返回完整的 Unicode 码点，一次即可获取。
CSS 中如何使用 Unicode 转义？
CSS 中使用反斜杠 \ 转义，格式为 \20AC（后跟空格）或 \0020AC（必须六位）。例如，选择器不能以数字开头，但可以用 .\31 23 选择 class 为 123 的元素。
UTF-8 编码是如何区分不同长度的字符的？
UTF-8 通过首字节的前缀标识长度：0 开头表示单字节（兼容 ASCII），110 开头表示双字节，1110 开头表示三字节，11110 开头表示四字节。后续字节均以 10 开头，从而区分字符边界。
