资讯专栏INFORMATION COLUMN

每日 30 秒 ⏱ 字符编码排雷录

mmy123456 / 1334人阅读

简介
字符编码、字符长度错误、截取字符错误、UTF8、Unicode

计算机重重底层之下都是由 0 和 1 组合,但是你知道他们是怎么一步步变成字符串的嘛?在我们现实生活中最常见的例子可以通过 wo 在新华字典中找到 这个字。同样计算机通过 0 和 1 组合在 字典 中查找到对应的字符,那 字典 内容是什么呢?

起源

计算机诞生于 美国 它的使用者大多数使用英文,美国国家标准学会 便制定了这本字典包括了 26个大写英文字母26个小写英文字母10个阿拉伯数字等总共 256 个字符的 ASCII 字符集。

混乱

ASCII 用二进制来表示就是 0000 00001111 1111 被用得满满当当,汉字就没有地方可以放得下了这下怎么办?正所谓江山大有人才出,国标编码 GB 系列出现了,其中最耳熟能详的就是 GB2312

那么问题来了世界拥有 25003500 种语言,有文字的语言有 930 种。你能想象你在浏览不同语言界面的时候,需要自己不断的去切换 字典 并且 每次切换查找不到的字符就会乱码出现。

统一
书同文,车同轨,行同伦。

上面这句话歌颂了秦始王具有跨时代意义的成就,但是现实世界中统一语言显得不可能。那我们能否换个思路解决这个问题呢?先思考一个问题:“把大象放入冰箱需要几步”,答案大家都知道“打开,装进去,关上”。那统一字符怎么办呢?那就是创建一个足够大的字典把所有的字符都放进去。

万国码

Unicode 万国码 轰隆一声诞生了,顾名思义统一了全世界的所有文字编码可以到 Unicode Consortium 和 codepoints 中查看,对应的实现有UTF8、UTF16
、UTF-32。

可变长度字符编码

UTF8、UTF16、UTF-32最大区别在于对应多少字节的数据,越大能存储的字符也就越多。其中 UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式,也就是现在 html 中最常看到的 所声明字符集。

UTF 最大的特点在于可变长的字节,例如 UTF8 可以是 1到4个字节来记录 万国码,为什么这么设计呢?日常使用得到的字符对应的字符编码没有必要占用这么多字节,例如 0000 00000000 0000 0000 0000 都能表示 0,那使用更短的字节所占用的空间更小,传输的速度更快。

小插曲

在统一编码的过程中还出现了一个字符集 UCS-2,它固定使用 2个字节来编码 与 UTF 可变长度字符编码有一定程度上的不同,但是随着统一进程下被 UTF-16 收编了。

JavaScript 字符处理

了解字符基本原理和进程后,那么 JavaScript 是什么编码呢?没错它就刚才 小插曲 中提到的 UCS-2,原因是 JavaScript 诞生时 UTF-16 还没有出现。

但是现在大家都在使用 UTF 可变长度字符编码UTF-16 的可变字节为 2个或者 4个,而 UCS-2 却只有 2个。这样两个字符集之间就有存在一个 UCS-2 无法识别的 4字节,JavaScript 在处理字符时会傻傻的按着 UCS-2 的两字节去处理,再加上字典里没有这个字符笨笨的小脑袋瓜无法处理只能输出乱码。

由于 emoji 表情的普及,而且 emoji 刚好就是处于 UCS-2字典之外,在前端开发中遇到可能出现 emoji 的地方需要小心谨慎:

长度
BUG 预警

现在最为常用的 emoji 表情为 4个字节编码表示,由于 UCS-2 固定两个字节,在统计长度时 emoji 会被当做两个 UCS-2 字符,结果会和我们预期的输出大了一倍。

let emoji = "           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102984.html

相关文章

  • 每日 30 ⏱ URL 大爆炸

    showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/url/poster.png); 简介 URL结构、组成、query、hash、axios数组传递错误、HTTP 请求 伴随着微信消息的提示音 小四 发来一段代码说 不知道为什么请求不到页面数据: axios.get...

    W4n9Hu1 评论0 收藏0
  • 每日 30 ⏱ 投怀送抱

    showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 简介 SEO、sitemap、搜索引擎优化、简单教程 在暧昧期和暗恋期时心里总是悬挂着: ta 为什么还不和我表白? ta 是不是对我没感觉? ta 是不是只是把我当备胎? ta 是不是对谁都这样? 解决问题最简单的方式就是直接 问问对方...

    kevin 评论0 收藏0
  • 每日 30 ⏱ JSON对象数组转换 CSV 表格数据

    简介 数组、对象、CSV、表格、工具 我们在 每日 30 秒之 arrayToCSV 中一起学习了将数组数据转化为 csv 表格数据并导出,那如果是对象数组怎么办呢?小脑袋瓜转得快的同学肯定会说:使用 Array.prototype.map 把需要导出的字段先遍历取出,再使用 arrayToCSV 将其导出为 CSV 数据表格。 可是你有没有想过如果一个对象数组数据非常之大时,使用 Array.p...

    Ajian 评论0 收藏0
  • 每日 30 ⏱ 终极等于

    简介 字符串、数字、数组、对象、时间、类型、等于 科学家发现,人脑中会分泌多种能让人感到快乐、安全和成就感的物质,这些物质统称为快乐素。通常情况下,快乐素的释放水平很低,维持我们心情平静。只有当我们完成了预设目标,作为奖励,大脑才会增加快乐素的分泌,让人感受到满足和成功的喜悦。 这是之前看到的一篇关于 大脑奖励机制 文章的一段话,为了要获得奖励我们需要有预设目标,而是每日 30 秒系列也是为了帮助...

    lakeside 评论0 收藏0
  • 每日 30 ⏱ 数组转CSV表格数据

    showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 简介 数组、CSV、表格、工具 将一个数组转化为逗号为分割符的字符串(CSV)即表格数据。 // 该源码来自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...

    nanchen2251 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<