前端必须知道的emoji知识

字符在计算机的存储方式

在计算机中,所有的数据在存储和运算时都要使用[二进制]数表示。

具体如何进行二进制数字与字符的映射定义,每个人都可以自行约定,而大家如果要想互相通信而不造成混乱,那么大家就必须使用相同的编码规则,于是美国有关的标准化组织就出台了ASCII编码,统一规定了上述常用符号用哪些二进制数来表示。

概念

码点:是在编码标准中规定某个字符对应的数字。

字符集:是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常见字符集:ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。

编码:字符到计算机能够储存的内容之间的映射。编码是信息从一种形式或格式转换为另一种形式的过程。

字符集只是字符及码点的集合,字符编码才是真正定义了字符到计算机储存内容的映射。计算机要准确的处理各种字符集文字,就需要进行[字符编码],以便计算机能够识别和存储各种文字。

编码标准

ASCII:美国信息交换标准代码

ASCII 码使用指定的7 位或8 位二进制数组合来表示128(十进制数字0-127) 或256 种可能的字符。

Unicode:统一码、万国码、单一码

为了解决传统的字符编码方案的局限而产生,它为每种语言中的每个字符设定了统一并且唯一的[二进制编码],以满足跨语言、跨平台进行文本转换、处理的要求。该标准始终使用十六进制数字,而且在书写时在前面加上前缀"U+",例如字母"A"的编码为 0x0041 和字符"€"的编码为 0x20AC,所以"A"、"€"的编码书写为"U+0041"、"U+20AC"。

1990年开始研发,1994年正式公布。 2010年,emoji被纳入Unicode中,每个emoji占据4字节。建立对Unicode的认知,对理解Emoji的来龙去脉是非常有帮助的。

UTF(Unicode Tranformation Format)Unicode字符集转换格式:

UTF-8:是Unicode的其中一个使用方式,使用可变长度字节来储存 Unicode字符,例如ASCII字母继续使用1字节储存,重音文字、希腊字母或[西里尔字母]等使用2字节来储存,常用的汉字使用3字节,[辅助平面]字符则使用4字节。

*英文:1 Byte;中文:2 Byte;特殊字符:4 Byte。

UTF-16:使用一个或两个未分配的 16 位代码单元的序列对 Unicode 代码点进行编码。

UTF-32:将每一个 Unicode 代码点表示为相同值的 32 位整数。空位使用0补充,所以大量的存储'0',空间效率低。

utf8mb4:MySQL的"utf8mb4"才是真正的"UTF-8"。

举例

字符"C"被存成"01000011",那么计算机在显示这个字符时需要经过两个步骤:

1、计算机读取"01000011",得到数字67,因为67被编码成"01000011"。

2、计算机在Unicode字符集中查找67,找到了"C"。

同样的:

1、我的电脑将"C"映射成Unicode字符集中的67。

2、我的电脑将67编码成"01000011",并发送给Web服务器。

几乎所有的网络应用都使用了Unicode字符集,因为没有理由使用其他字符集

应用

Html使用<meta charset="utf-8" />向浏览器指明该网页的编码方式。

JavaScript使用内置函数codePointAt查询Unicode字符码点。

相关推荐
百锦再5 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君5 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再5 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI5 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
失忆爆表症7 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录7 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜7 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛7 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大7 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT067 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain