前端必须知道的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字符码点。

相关推荐
世界哪有真情3 小时前
拿人类意识卡 AI?等于用 bug 验收正式产品
前端·人工智能·后端
Listen·Rain4 小时前
Vue3:setup详解
前端·javascript·vue.js
Patrick_Wilson4 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen5 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh5 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
Csvn5 小时前
🤖 AI 生成前端代码的 5 个典型翻车现场及修复指南
前端
IT_陈寒6 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎7 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮8 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗8 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js