一、一个让我查了半小时的Bug:奇怪的字符串长度
前几天排查一个表单校验问题,用户在输入框里填了一个“家庭成员”的emoji,前端判断字符个数的时候怎么都不对。需求是限制输入不超过10个字符,但用户输了一个“👨👩👧👦”,系统提示“已输入11个字符”。用户一脸懵:我明明只打了一个符号啊。
我看了一眼控制台,"👨👩👧👦".length 输出的确实是 11。但如果按用户感知来算,这就是一个字符。问题来了:字符串的length属性到底在数什么?它数的东西和用户以为的“字符”根本不是一回事。
这个问题看似简单,背后涉及的是字符编码、代理对、组合字符、变体选择符、零宽连接符等一系列机制。只要你的项目处理过中文、emoji、特殊符号,就迟早会踩进这个“长度谎言”里。而且这不只是JavaScript的问题,Python、Java、Go、SQL、C++里各有各的算法,结果各不相同。
这篇文章我不打算只丢结论,我会把“为什么emoji的长度是11”这个问题从头到尾拆开,再把常见编程语言里的差异和实际项目中最稳的解决方案一起整理出来。以后你再看字符串长度,心里会非常清楚它在数什么。
二、先搞清楚:length属性数的到底是“什么”
2.1 字符 ≠ 字节 ≠ 代码单元
我们平时说的“字符”,在计算机里有好几层含义。
最底层的是字节(byte),一个字节8个bit,是存储的基本单位。往上一层是代码点(code point),Unicode里每个字符对应一个唯一编号,比如“中”的码点是 U+4E2D,😀 的码点是 U+1F600。再往上一层是用户感知的“字形”(grapheme),也就是我们肉眼看屏幕上渲染出来的那个东西。
JavaScript的 .length 数的是什么?它数的既不是字节,也不是代码点,而是UTF-16代码单元(code unit) 的数量。这是理解所有问题的最关键一步。
2.2 UTF-16和代理对:Unicode的容量陷阱
Unicode最初的设计是每个字符用16bit表示,也就是最多表示65536个字符。这个空间放放英文、拉丁语系、中文、日文假名、韩文谚文基本够用——中文常用的也就两万多个。但后来各种古代文字、生僻字、数学符号、音乐符号、emoji不断加入,65536个位置很快就不够用了。
Unicode的解决方法是不再把字符集限制在16bit,而是扩展到了超过100万个码点。那问题来了:旧的系统已经有大量“一个字符=两个字节”的假设,比如Java早期、Windows API、JavaScript规范。为了兼容,UTF-16被设计成一种变长编码:常见字符仍然用16bit(即1个代码单元)表示,超出 U+FFFF 的字符则拆成两个16bit代码单元,合起来叫一个代理对(surrogate pair)。
以 😀 为例,它的码点是 U+1F600,二进制是 11111011000000000,超过16bit能表示的范围。UTF-16就把这个码点拆成两个代码单元:0xD83D 和 0xDE00。两个都是16bit的“半截字符”,单独拿出来都是无效字符,只有拼在一起才表示 😀。
所以 "😀".length 返回 2,不是因为它占两个“字符”,而是因为它占了两个UTF-16代码单元。你数的不是字符个数,而是“存储格子”的个数。
2.3 “👨👩👧👦”为什么是11
现在我们来数“👨👩👧👦”的length。这个emoji在Unicode里的真实结构是这样的:
| 组成部分 | 码点 | UTF-16表示 | 占几个代码单元 |
|---|---|---|---|
| 👨 男人 | U+1F468 | \uD83D\uDC68 |
2 |
| ZWJ零宽连接符 | U+200D | \u200D |
1 |
| 👩 女人 | U+1F469 | \uD83D\uDC69 |
2 |
| ZWJ零宽连接符 | U+200D | \u200D |
1 |
| 👧 女孩 | U+1F467 | \uD83D\uDC67 |
2 |
| ZWJ零宽连接符 | U+200D | \u200D |
1 |
| 👦 男孩 | U+1F466 | \uD83D\uDC66 |
2 |
加起来:2 + 1 + 2 + 1 + 2 + 1 + 2 = 11。
你看,这7个Unicode码点组合在一起,视觉上渲染成一个“一家四口”的emoji。但在JavaScript看来,这只是11个代码单元的序列。用户看到的是一个字符,JavaScript看到的是11个储存格。
这就是我所说的“长度谎言”——不是JavaScript设计得有问题,而是它的length属性从来就不承诺“用户可感知字符数”,只是我们习惯性把它当作字符数来用。
三、从2到11:emoji长度“膨胀”的完整链条
3.1 最简单的情况:单个emoji算几个?
先列几个常见的emoji在不同视角下的长度:
| Emoji | 含义 | Unicode码点数 | UTF-16代码单元数(JS的length) | 字节数(UTF-8) |
|---|---|---|---|---|
| 😀 | 笑脸 | 1 | 2 | 4 |
| ❤️ | 红心 | 2(心+变体选择符) | 3 | 6 |
| 👍🏽 | 黄皮肤点赞 | 3(拇指+肤色修饰符) | 4 | 7 |
| 👨👩👧👦 | 家庭 | 7 | 11 | 25 |
| 🏳️🌈 | 彩虹旗 | 4(旗+变体选择符+ZWJ+彩虹) | 6 | 12 |
单个emoji也可能是“多个码点”,这点很多人不知道。
拿 ❤️ 举例,常见的红心 U+2764 是兼容符号,本意是给纯文本用的。为了让它渲染成emoji样式,标准做法是在后面追加一个变体选择符(Variation Selector) U+FE0F,表示“前面的字符请用emoji风格显示”。所以 ❤️ 在内存里其实是两个码点:U+2764 + U+FE0F,在JavaScript里length就是3(\u2764占1个,\uFE0F占1个?不对,这里我修正一下:U+2764在BMP内,占1个代码单元;U+FE0F也在BMP内,占1个代码单元。但一般我们用 "❤️".length 实测是2,因为部分环境把 U+2764 和 U+FE0F 各算1个。等等——我上面表格里写的是3,需要再核对)。
关于 ❤️ 的length,我实际在Node.js里测过:"❤️".length 返回 2。因为 U+2764 在BMP范围内(1个代码单元),U+FE0F 也在BMP范围内(1个代码单元),所以是1+1=2。我在前面表格写成3,是把它当成非BMP字符的代理对来算了,这里需要更正。这也是很多人容易搞混的地方:变体选择符本身是BMP字符,只占1个代码单元,不构成代理对。
3.2 肤色修饰符与ZWJ:长度膨胀的推手
肤色修饰符(Emoji Modifier Fitzpatrick) 的范围是 U+1F3FB 到 U+1F3FF,它们位于BMP之外,每个占2个代码单元。所以 "👍🏽".length 是4 = 点赞的2 + 肤色的2。
ZWJ(Zero Width Joiner,零宽连接符),码点 U+200D,在BMP内,每个占1个代码单元。它的作用是把多个emoji“粘”成一个组合emoji。最典型的就是家庭系列、职业系列(比如 👩💻 = 女人 + ZWJ + 电脑)、旗帜系列。
所以你会发现一个规律:emoji的长度不是你能凭肉眼猜的,它由内部码点数量决定,而码点数量受变体选择符、肤色修饰符、ZWJ影响很大。 一个看似简单的emoji,实际可能是3个、4个,甚至7个码点叠加出来的结果。
3.3 为什么同一个emoji在不同平台长度不同?
有经验的开发者可能发现:同一个字符串,在Windows和macOS上复制粘贴后的length可能不一样。这主要来自两个原因。
一是平台会做“规范化”,比如某些品牌logo、旗帜类emoji,有的平台用“国家/地区指示符”表示(如 🇨🇳 = 区域指示符C + 区域指示符N,两个码点),有的平台用单一码点表示,那length自然不同。
二是系统输入法/剪贴板可能会做兼容性转换,比如把带变体选择符的字符串去掉选择符,或者反过来补上。我曾经在一个跨平台聊天项目里遇到:用户从iPhone上复制的 😀 和从Android上复制的 😀,length一个是2一个是1。后来排查发现iOS端输入的字符串带了 U+FE0F 变体选择符,Android端没带。这直接导致两个端做字数校验时结果不一致。
这类问题没有一劳永逸的“官方标准处理”,只能是项目里统一规则、统一处理函数,大家按同一套逻辑截断和计数。
四、不同语言里的length:原来它们数的东西都不一样
4.1 JavaScript、Java、C#:UTF-16代码单元
它们的 .length / .Length 属性数的是UTF-16代码单元,规则和上面JavaScript一致。"😀".length 在Java里同样是2,C#里同样是2。如果你想数“用户感知的字符数”,不能直接用它。
进Java坑的朋友说一句:String.length() 在JDK里返回的就是 value.length,而 value 是 char[],一个char正好是一个UTF-16代码单元。所以别怪Java,它也是这么设计的。
4.2 Python 3:请区分“字符”和“字节”
Python 3的 len("😀") 返回 1,乍一看好像“很懂用户”,但这不是因为它按字形感知,而是因为它直接按Unicode码点计数。一个码点算一个“字符”,所以代理对被Python透明处理了,不需要你关心。
但是注意,len("👨👩👧👦") 在Python里返回的是 7,不是 1。因为它有7个码点,Python数的是码点数。所以你会看到Python用户对这个家族emoji的长度也有疑惑:7,不是11,也不是1。
这里就引出三个层次:
- 代码单元(UTF-16):JavaScript等,家族emoji = 11
- 码点(Unicode):Python 3、Rust的
chars().count(),家族emoji = 7 - 字形簇(Grapheme Cluster):用户真实感知的字符,家族emoji = 1
4.3 Go和Rust:直接数“字节”
Go语言的内置 len("😀") 返回 4,因为它数的是UTF-8编码后的字节数。Rust也一样,"😀".len() 返回 4。如果你用 len() 来判断用户输入了几个字符,那中文、emoji会死得很惨:“你好”的长度是6,不是2。
Go里想按码点数,可以用 utf8.RuneCountInString("😀"),结果是1。
Rust里想按码点数,可以用 "😀".chars().count(),结果是1。
如果按字形簇,两边都需要引入额外的Unicode库(比如Rust的 unicode-segmentation)。
4.4 SQL和数据库:又一套规则
数据库里也有类似的坑。
- MySQL的
CHAR_LENGTH("👨👩👧👦")返回7,数的是码点数;而LENGTH()返回的是字节数(utf8mb4下是25)。 - PostgreSQL的
length('👨👩👧👦')返回7,octet_length返回25。 - SQL Server的
LEN(N'👨👩👧👦')返回11——因为SQL Server内部用UTF-16,它会数代码单元,和JavaScript一致。
如果你的业务有“字符串长度限制”,第一个要问清楚的是:产品说的“长度”是谁的长度? 如果是产品经理用肉眼数的“用户感知字符数”,那数据库字段类型、接口校验、前端拦截,三方可能各自算出不同的数来。
4.5 横向对比:同一个字符串,各语言长度一览
这组对比建议直接收藏。以后无论前端后端扯皮,甩一张表过去能省很多沟通成本。
| 环境/方法 | “😀”的长度 | “👨👩👧👦”的长度 | 数的单位 |
|---|---|---|---|
JavaScript .length |
2 | 11 | UTF-16代码单元 |
Java .length() |
2 | 11 | UTF-16代码单元 |
C# .Length |
2 | 11 | UTF-16代码单元 |
Python 3 len() |
1 | 7 | Unicode码点 |
Go len() |
4 | 25 | UTF-8字节 |
Rust .len() |
4 | 25 | UTF-8字节 |
Go utf8.RuneCountInString() |
1 | 7 | Unicode码点 |
Rust .chars().count() |
1 | 7 | Unicode码点 |
PostgreSQL length() |
1 | 7 | Unicode码点 |
MySQL CHAR_LENGTH() |
1 | 7 | Unicode码点 |
MySQL LENGTH() |
4 | 25 | UTF-8字节 |
SQL Server LEN() |
2 | 11 | UTF-16代码单元 |
五、项目实战:如何“正确”地数用户输入的字符
5.1 需求先对齐:产品到底要限制什么?
在写任何代码之前,先和产品确认清楚需求场景。我在项目里发现,所谓“限制输入N个字符”,底层诉求大概分三种:
- 限制存储大小。比如某字段存到数据库最长不能超过多少字节,这种应该按字节数限制(MySQL的
VARCHAR(255)在utf8mb4下其实最多能存255个字符,但每个字符最多占4字节,总字节数不能超过65535,这是个分层的复杂问题)。 - 限制数据库字段长度。如果字段定义是
VARCHAR(64),用CHAR_LENGTH判断码点数比较稳妥。 - 限制用户感知输入个数。比如昵称、评论、表单字段想“最多10个字”,那应该按字形簇(Grapheme Cluster)来数。这里“一个字”是用户在屏幕上看到的一个元素。
大多数业务场景是第三种。但遗憾的是,length 属性不能帮你完成这个任务。
5.2 JavaScript里的正确姿势
方案一:使用 Intl.Segmenter(现代浏览器和Node.js推荐)
Intl.Segmenter 是ECMAScript国际化API的一部分,专门用来做文本分段,支持按字形簇切分。
javascript复制function graphemeLength(str) {
const segmenter = new Intl.Segmenter('zh', { granularity: 'grapheme' });
const segments = segmenter.segment(str);
let count = 0;
for (const _ of segments) {
count++;
}
return count;
}
console.log(graphemeLength('👨👩👧👦')); // 1
console.log(graphemeLength('👍🏽')); // 1
console.log(graphemeLength('❤️')); // 1
实测下来,这个API对emoji、中文、带声调的拉丁字母组合都能正确处理。兼容性方面,Chrome 87+、Edge 87+、Safari 14.1+、Firefox 125+都已支持,Node.js 16+也已支持。在2026年的今天,可以放心用。
如果你担心旧环境,Intl.Segmenter 可以在运行时判断,不存在就降级(后面说)。
方案二:用 Array.from() 或展开运算符(按码点数)
javascript复制// 结果是7,不是1,因为数的是码点
console.log([...'👨👩👧👦'].length); // 7
console.log(Array.from('👍🏽').length); // 3
这个方法解决的是“代理对被拆成两个代码单元”的问题,但解决不了“ZWJ组合成字形簇”的问题。做字数统计时,它比 length 强,但还没完全达到用户感知层级。
方案三:用正则匹配字形簇
javascript复制// 将字形簇作为一个整体来匹配
const graphemes = '👨👩👧👦'.match(/\p{Extended_Pictographic}(\u200D\p{Extended_Pictographic})*/gu);
console.log(graphemes ? graphemes.length : 0); // 1
这个方案能覆盖大部分emoji组合序列,但正则写起来比较绕,可读性差,而且扩展图形字符集列表可能随版本更新变化。我一般只在无 Intl.Segmenter 的旧环境里才用。
兼容性降级方案
javascript复制function safeGraphemeLength(str) {
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
let count = 0;
for (const _ of segmenter.segment(str)) count++;
return count;
}
// 降级:至少按码点计数,避免代理对被拆开
return Array.from(str).length;
}
5.3 Python里怎么数?
Python 3的 len() 已经按码点计数,但码点数 ≠ 字形簇数。按字形簇需要借助第三方库 regex(不是标准库 re):
python复制import regex
# 家族emoji算1个字形簇
count = len(regex.findall(r'\X', '👨👩👧👦')) # 1
\X 在 regex 模块中匹配一个扩展字形簇(Extended Grapheme Cluster),是Unicode官方推荐的处理方式。如果你的项目要在Python里做用户输入字数校验,建议直接用这个,简单可靠。
5.4 Java/Kotlin里怎么数?
Java没有官方的字形簇API,推荐用ICU4J:
java复制import com.ibm.icu.text.BreakIterator;
public static int graphemeLength(String text) {
if (text == null || text.isEmpty()) return 0;
BreakIterator it = BreakIterator.getCharacterInstance();
it.setText(text);
int count = 0;
while (it.next() != BreakIterator.DONE) {
count++;
}
return count;
}
// 调用:graphemeLength("👨👩👧👦") 返回 1
如果不想引入ICU4J,也可以用 text.codePointCount(0, text.length()) 按码点数,但同样解决不了ZWJ组合的情况。实际项目里如果一定要“用户可感知字符数”,ICU4J是标准答案。
5.5 截断字符串:比计数更隐蔽的坑
很多项目只做了“长度限制”,没做“安全截断”。比如用户输入超长,后端直接把字符串 substring(0, 10),这在emoji面前就是灾难:
javascript复制const s = 'abc😀def';
console.log(s.substring(0, 4)); // 'abc�'
因为 substring 按代码单元切,把一个代理对劈成两半,输出一个无法显示的“半截字符”。这就是经典的“乱码”来源之一。
安全的截断逻辑应该是:先按字形簇分段,再取前N段拼接。
javascript复制function truncateByGrapheme(str, maxLen) {
const segmenter = new Intl.Segmenter('zh', { granularity: 'grapheme' });
const segments = Array.from(segmenter.segment(str), seg => seg.segment);
return segments.slice(0, maxLen).join('');
}
console.log(truncateByGrapheme('abc😀def', 4)); // 'abc😀'
同理,Python里截断用 regex.findall(r'\X', s)[:n],再把它们拼接起来。Java里用 BreakIterator 拆开再拼。规则一致:永远不要在代理对和ZWJ序列中间切开一个“字形”。
六、从“长度”延伸到周边的更多编码陷阱
6.1 字符串排序:为什么emoji总排在不该在的位置?
字符串排序和“长度”看似无关,其实也受编码规则影响。JavaScript默认的 Array.prototype.sort() 按UTF-16代码单元比较,中文区、emoji区、拉丁字母区、其他符号区的排列顺序和拼音、笔画、用户直觉完全不同。
比如在项目里给用户排序,预期是按拼音,但直接用 sort() 得到的是按码点排序。正确的做法是用 localeCompare 或 Intl.Collator:
javascript复制const names = ['张三', '李四', '王五', '😀'];
const collator = new Intl.Collator('zh-Hans-CN', { usage: 'sort' });
console.log(names.sort(collator.compare));
这样中文能按拼音近似排序,但对emoji依然没有完美方案——Intl.Collator 对emoji的排序规则可能和用户预期不一致。所以业务上如果有特殊排序需求(比如把emoji放最后),还是得先过滤处理。
6.2 字符串反转:你以为的“反”不是“反”
字符串反转也是个经典陷阱。'abc😀'.split('').reverse().join('') 会得到乱码,因为代理对被拆开。正确的按码点反转也要小心ZWJ序列:
javascript复制function reverseString(str) {
const segmenter = new Intl.Segmenter('zh', { granularity: 'grapheme' });
const graphemes = Array.from(segmenter.segment(str), seg => seg.segment);
return graphemes.reverse().join('');
}
console.log(reverseString('abc😀')); // '😀cba'
有人问,字符反转有什么实际场景?UI上“从右到左”的展示、某些文本处理、富文本的选区处理都可能用到。有了字形簇概念,这些问题就都好解释了。
6.3 String转数字时,“隐形字符”怎么混进来的?
用户从PDF、Excel、聊天工具里复制的号码,经常会带上不可见的字符,比如零宽空格(U+200B)、零宽非连接符(U+200C)、BOM头(U+FEFF)、NBSP(U+00A0)。直接用 Number('123 ') 会得到 NaN,用 parseInt('\uFEFF123') 也不靠谱。SQL Server里 CAST('123' AS INT) 如果字符串里有不可见字符,一样报错。
我的惯例是:所有用户输入在进入解析流程前,先做一次“清洗”:
javascript复制function cleanInvisibleChars(str) {
// 去掉零宽空格、BOM、NBSP等不可见控制字符(按需求保留正常空格)
return str
.replace(/[\u200B-\u200D\uFEFF]/g, '')
.replace(/\u00A0/g, ' ');
}
这样之后再 parseInt 或提交后端,崩溃率能下降一大截。
6.4 模板字符串和Java多行文本:缩进的“长度”也会骗人
Java 15+ 支持了文本块(Text Block),Python有 f""",JavaScript有模板字符串。这里有一个和“长度”直接相关的小坑:文本块里的行首缩进会按公共缩进自动去除,但行尾的空格可能被保留或被忽略,不同工具链对 “空行是否保留空格” 的处理不一致。如果拿这些字符串去做签名、哈希或比对,“两边明明看起来一样”但二进制不同,就是因为不可见空白字符的差异。
这类问题排查起来非常费劲,因为肉眼完全看不出区别。我的经验是:凡是涉及字符串比较、哈希、签名、入库去重的场景,都要先明确“是否做规范化处理”——用 trim() 还是 normalize()(Unicode规范化,处理组合字符和预组合字符的等价关系),如果做的话统一在哪一层做,必须在代码里固定下来。
七、遇到“字符串长度不对”时的排查链路
7.1 复现并确认各环境的length
碰见字符串长度和预期不一致,先把字符串“解剖”出来看,别猜。核心动作是在多个工具里输出它内部码点和UTF-16代码单元的十六进制表示。
JavaScript里可以这样:
javascript复制function inspectString(str) {
console.log('原始字符串:', JSON.stringify(str));
console.log('length:', str.length);
console.log('码点数组:', Array.from(str).map(ch => ch.codePointAt(0).toString(16)));
console.log('UTF-16代码单元:', Array.from(str, (ch) => {
// 注意这里不直观,推荐用下面逐字遍历的方法
}));
for (let i = 0; i < str.length; i++) {
console.log(`codeUnit[${i}] = 0x${str.charCodeAt(i).toString(16)}`);
}
}
inspectString('👨👩👧👦');
输出会很清楚看到 0xd83d 0xdc68 0x200d ... 这样的代理对和零宽连接符。看到 0x200D、0xFE0F、0xDCxx/0xD8xx 这种特殊记号,就能立刻判断字符串里混入了哪些东西。
7.2 判断是哪一层导致的“长度不符”
按顺序排查四层,定位速度最快:
- 是不是代理对? 如果
Array.from(str).length < str.length,说明包含非BMP字符。这就是JavaScript里最常见的“一个字符占两个长度”的原因。 - 是不是变体选择符? 如果码点里出现
FE0F、FE0E,说明有“emoji样式/文本样式”的切换符,它会额外占1个代码单元。 - 是不是零宽连接符? 如果码点里有
200D,说明这是多个emoji组合,长度会呈倍数膨胀。 - 是不是零宽空格或其他不可见控制字符? 如果
charCodeAt出现200B、200C、FEFF、00A0等,这可能不是普通用户输入的,而是从别处复制粘贴混进来的。
把这个链路走一遍,绝大多数长度谜题都能定位。
7.3 一个典型的跨端Bug复盘
去年我处理过一个真实案例:用户在iOS备忘录里复制了一段文字,里面有几十个带重音符号的拉丁字母(比如 é),发到我们App的评论框,字数校验直接超限。
我拿码点一看,iOS复制出来的 é 是“e + 组合音标(U+0301)”两个码点,而用户从网页输入法打出来的 é 是预组合字符(U+00E9)一个码点。两个看起来完全一样,但一个算2个字符,一个算1个。
根因是iOS的文本编辑会自动做NFC或NFD规范化,不同输入路径产生不同的Unicode规范化形式。处理方式是在后端入库前统一做 normalize('NFC')(把可组合的字符尽量合成一个码点),长度统计先规范化再统计,这才把问题压下去。
这里也衍生出一个建议:凡是对字符串做唯一性校验、缓存key、签名等操作的场景,强烈建议显式使用统一的Unicode规范化形式(如NFC),否则同一个字可能有多种二进制表示,数据库唯一索引也拦不住。
八、几个可以直接抄的通用工具函数
分享几个我在多个项目里沉淀下来的工具函数,按不同语言整理,复制到项目里就能用。
8.1 JavaScript/TypeScript 工具集
typescript复制/**
* 获取用户可感知字符数(字形簇数量)
* 适用于输入框字数限制、富文本统计等场景
*/
export function graphemeLength(str: string): number {
if (!str) return 0;
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
let count = 0;
for (const _ of segmenter.segment(str)) count++;
return count;
}
return Array.from(str).length;
}
/**
* 按用户可感知字符数截断,不破坏代理对和ZWJ序列
*/
export function truncateByGrapheme(str: string, maxLength: number): string {
if (!str || maxLength <= 0) return '';
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
const segments = Array.from(segmenter.segment(str), (seg) => seg.segment);
return segments.slice(0, maxLength).join('');
}
return Array.from(str).slice(0, maxLength).join('');
}
/**
* 输出字符串内部结构,用于排查长度问题
*/
export function inspectString(str: string): void {
console.log('JSON:', JSON.stringify(str));
console.log('length:', str.length);
console.log('codePoints:', Array.from(str).map((c) => c.codePointAt(0)?.toString(16)));
for (let i = 0; i < str.length; i++) {
console.log(`uint[${i}]=0x${str.charCodeAt(i).toString(16)}`);
}
}
/**
* 清理用户输入中的不可见字符
*/
export function cleanInvisibleChars(str: string): string {
return str
.replace(/[\u200B-\u200D\uFEFF]/g, '')
.replace(/\u00A0/g, ' ')
.normalize('NFC');
}
8.2 Python 工具集
python复制import regex
def grapheme_length(s: str) -> int:
"""用户可感知字符数(字形簇数量)"""
if not s:
return 0
return len(regex.findall(r'\X', s))
def truncate_by_grapheme(s: str, max_len: int) -> str:
"""按字形簇截断,安全处理emoji和组合字符"""
if not s or max_len <= 0:
return ''
graphemes = regex.findall(r'\X', s)
return ''.join(graphemes[:max_len])
def clean_invisible_chars(s: str) -> str:
"""去掉零宽字符、NBSP并统一NFC规范化"""
return s.replace('\u200b', '').replace('\u200c', '').replace('\u200d', '').replace('\ufeff', '').replace('\u00a0', ' ').replace('\u00a0', ' ').replace('\u200d', '') # 注意按需保留ZWJ
这里要提醒一下:清理函数要根据业务按需保留ZWJ。如果你的业务本身就是要统计和展示emoji组合(比如聊天App),那 ZWJ 是 emoji 组合的一部分,不能直接去掉。如果你是在清洗文本里的不可见格式字符(比如做内容审核、搜索引擎索引),那零宽字符确实应该清掉。工具函数是模板,业务细节必须自己把握。
8.3 Java 工具集
java复制import com.ibm.icu.text.BreakIterator;
public final class GraphemeUtil {
private GraphemeUtil() {}
public static int graphemeLength(String text) {
if (text == null || text.isEmpty()) return 0;
BreakIterator it = BreakIterator.getCharacterInstance();
it.setText(text);
int count = 0;
while (it.next() != BreakIterator.DONE) count++;
return count;
}
public static String truncateByGrapheme(String text, int maxLength) {
if (text == null || text.isEmpty() || maxLength <= 0) return "";
BreakIterator it = BreakIterator.getCharacterInstance();
it.setText(text);
int start = it.first();
int end = it.next();
int count = 0;
while (end != BreakIterator.DONE && count < maxLength) {
start = end;
end = it.next();
count++;
}
return text.substring(0, start);
}
public static String cleanInvisibleChars(String text) {
if (text == null) return null;
return text.replace("\u200B", "")
.replace("\u200C", "")
.replace("\uFEFF", "")
.replace("\u00A0", " ")
.replace("\u200D", "") // 按需保留
.normalize();
}
}
九、回到标题:下次看到length时,先问一句“它数的是什么”
写到这里,“为什么这个emoji的长度是11”已经不难回答了:因为JavaScript的length统计的是UTF-16代码单元数量,而家族emoji内部由7个码点组成,其中4个非BMP字符被拆成8个代码单元,再加上3个ZWJ,一共11个代码单元。
但比结论更重要的是这个认知升级:字符串的“长度”从来不是唯一答案,它是一个分层概念。 同一段文本,可以数出1个字形簇、7个码点、11个代码单元、25个UTF-8字节,每种数字都有道理,取决于你问的是谁。
在实际开发中,我给自己定了几条规矩,分享给你参考:
- 在代码里解耦“存储长度”和“展示长度”。数据库字段、接口传参按字节或码点严格控制,前端交互按用户可感知字形簇做提示和拦截。
- 凡是做字符串截断、反转、排序、哈希、唯一性校验,必须用规范化+字形簇感知的实现,不要直接对原始字符串下手。
- 跨端/跨语言协作时,先约定统一口径。“这个字段最多100个字符”这句需求如果不定义“字符”指什么,两个端做出来可能完全不一样,事后扯皮成本很高。
- 排查长度问题时,先把字符串解剖成码点/代码单元,再下结论。“看起来一样”不代表“编码一样”,这是无数个隐形Bug的根源。
字符串这东西,平时看着简单,真要精细处理起来,里面的门道比想象中多得多。希望这篇文章能帮你跨过emoji这个坎,以后看到 length 返回一个“不可思议”的数字时,先打开十六进制看一眼再说话。
