起源：juejin.cn/post/7025400771982131236
在开发过程中偶然会遇到对于编码、Unicode，Emoji 的问题，发现自己对这方面的基础知识并没有充沛把握。所以在通过一番查找学习之后，整顿几篇通俗易懂的文章分享进去。
不晓得你是否遇到过这样的纳闷，在做表单校验长度的需要中，发现不同字符 length 可能大小不一。比方题目中的 “𠮷” length 是 2（须要留神📢，这并不是一个中文字！）。
'吉'.length
// 1
'𠮷'.length
// 2
'❤'.length
// 1
'💩'.length
// 2
复制代码要解释这个问题要从 UTF-16 编码说起。
UTF-16
从 ECMAScript® 2015 标准中能够看到，ECMAScript 字符串应用的是 UTF-16 编码。
定与不定: UTF-16 最小的码元是两个字节，即便第一个字节可能都是 0 也要占位，这是固定的。不定是对于根本立体（BMP）的字符只须要两个字节，示意范畴
U+0000 ~ U+FFFF，而对于补充立体则须要占用四个字节U+010000~U+10FFFF。
在上一篇文章中，咱们有介绍过 utf-8 的编码细节，理解到 utf-8 编码须要占用 1~4 个字节不等，而应用 utf-16 则须要占用 2 或 4 个字节。来看看 utf-16 是怎么编码的。
UTF-16 的编码逻辑
UTF-16 编码很简略，对于给定一个 Unicode 码点 cp（CodePoint 也就是这个字符在 Unicode 中的惟一编号）:
- 如果码点小于等于
U+FFFF（也就是根本立体的所有字符），不须要解决，间接应用。 - 否则，将拆分为两个局部
((cp – 65536) / 1024) + 0xD800，((cp – 65536) % 1024) + 0xDC00来存储。
Unicode 标准规定 U+D800…U+DFFF 的值不对应于任何字符，所以能够用来做标记。
举个具体的例子：字符 A 的码点是 U+0041，能够间接用一个码元示意。
'\u0041'
// -> A
A === '\u0041'
// -> true
复制代码Javascript 中 \u 示意 Unicode 的转义字符，前面跟着一个十六进制数。
而字符 💩 的码点是 U+1f4a9，处于补充立体的字符，通过 👆 公式计算失去两个码元 55357, 56489 这两个数字用十六进制示意为 d83d, dca9，将这两个编码后果组合成代理对。
'\ud83d\udca9'
// -> '💩'
'💩' === '\ud83d\udca9'
// -> true
复制代码因为 Javascript 字符串应用 utf-16 编码，所以能够正确将代理对 \ud83d\udca9 解码失去码点 U+1f4a9。
还能够应用 \u + {}，大括号中间接跟码点来示意字符。看起来长得不一样，但他们示意的后果是一样的。
'\u0041' === '\u{41}'
// -> true
'\ud83d\udca9' === '\u{1f4a9}'
// -> true
复制代码能够关上 Dev Tool 的 console 面板，运行代码验证后果。
所以为什么 length 判断会有问题?
要解答这个问题，能够持续查看标准，外面提到：在 ECMAScript 操作解释字符串值的中央，每个元素都被解释为单个 UTF-16 代码单元。
Where ECMAScript operations interpret String values, each element is interpreted as a single UTF-16 code unit.
所以像💩 字符实际上占用了两个 UTF-16 的码元，也就是两个元素，所以它的 length 属性就是 2。（这跟一开始 JS 应用 USC-2 编码无关，当初认为 65536 个字符就能够满足所有需要了）
但对于普通用户而言，这就齐全没方法了解了，为什么明明只填了一个 ‘𠮷’，程序上却提醒占用了两个字符长度，要怎样才能正确辨认出 Unicode 字符长度呢？
我在 Antd Form 表单应用的 async-validator 包中能够看到上面这段代码
const spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
if (str) {
val = value.replace(spRegexp, '_').length;
}
复制代码当须要进行字符串长度的判断时，会将码点范畴在补充立体的字符全副替换为下划线，这样长度判断就和理论显示的统一了！！！
ES6 对 Unicode 的反对
length 属性的问题，次要还是最后设计 JS 这门语言的时候，没有思考到会有这么多字符，认为两个字节就齐全能够满足。所以不止是 length，字符串常见的一些操作在 Unicode 反对上也会体现异样。
上面的内容将介绍局部存在异样的 API 以及在 ES6 中如何正确处理这些问题。
for vs for of
例如应用 for 循环打印字符串，字符串会依照 JS 了解的每个“元素”遍历，辅助立体的字符将会被辨认成两个“元素”，于是呈现“乱码”。
var str = '👻yo𠮷'
for (var i = 0; i < str.length; i ++) {
console.log(str[i])
}
// -> �
// -> �
// -> y
// -> o
// -> �
// -> �
复制代码而应用 ES6 的 for of 语法就不会。
var str = '👻yo𠮷'
for (const char of str) {
console.log(char)
}
// -> 👻
// -> y
// -> o
// -> 𠮷
复制代码开展语法(Spread syntax)
后面提到了应用正则表达式，将辅助立体的字符替换的形式来统计字符长度。应用开展语法也能够失去同样的成果。
[...'💩'].length
// -> 1
复制代码slice, split, substr 等等办法也存在同样的问题。
正则表达式 u
ES6 中还针对 Unicode 字符减少了 u 描述符。
/^.$/.test('👻')
// -> false
/^.$/u.test('👻')
// -> true
复制代码charCodeAt/codePointAt
对于字符串，咱们还罕用 charCodeAt 来获取 Code Point，对于 BMP 立体的字符是能够实用的，然而如果字符是辅助立体字符 charCodeAt 返回后果就只会是编码后第一个码元对于的数字。
'羽'.charCodeAt(0)
// -> 32701
'羽'.codePointAt(0)
// -> 32701
'😸'.charCodeAt(0)
// -> 55357
'😸'.codePointAt(0)
// -> 128568
复制代码而应用 codePointAt 则能够将字符正确辨认，并返回正确的码点。
String.prototype.normalize()
因为 JS 中将字符串了解成一串两个字节的码元序列，判断是否相等是依据序列的值来判断的。所以可能存在一些字符串看起来长得截然不同，然而字符串相等判断后果确是 false。
'café' === 'café'
// -> false
复制代码下面代码中第一个 café 是有 cafe 加上一个缩进的音标字符\u0301组成的，而第二个 café 则是由一个 caf + é 字符组成的。所以两者尽管看上去一样，但码点不一样，所以 JS 相等判断后果为 false。
'cafe\u0301'
// -> 'café'
'cafe\u0301'.length
// -> 5
'café'.length
// -> 4
复制代码为了能正确辨认这种码点不一样，然而语意一样的字符串判断，ES6 减少了 String.prototype.normalize 办法。
'cafe\u0301'.normalize() === 'café'.normalize()
// -> true
'cafe\u0301'.normalize().length
// -> 4
复制代码总结
这篇文章次要是我最近重新学习编码的学习笔记，因为工夫仓促 && 程度无限，文章中必然存在大量不精确的形容、甚至谬误的内容，如有发现还请善意指出。❤️
近期热文举荐：
1.1,000+ 道 Java面试题及答案整顿(2022最新版)
2.劲爆！Java 协程要来了。。。
3.Spring Boot 2.x 教程，太全了！
4.别再写满屏的爆爆爆炸类了，试试装璜器模式，这才是优雅的形式！！
5.《Java开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞+转发哦！
发表回复