Intl.Segmenter 中文文本怎么安全截断：按用户感知长度处理多语言标题

同一个标题用 slice(0, 20) 截断，中文看起来还能接受，遇到英文单词、组合 emoji 或阿拉伯语时就容易把内容切在奇怪的位置。前端真正要控制的不是 JavaScript 字符串长度，而是用户看到的词、句和字素边界。Intl.Segmenter 正好提供了这层能力。

为什么 slice 截断会破坏用户看到的文本

JavaScript 的字符串下标基于 UTF-16 code unit，不等于用户感知的字符。一个 emoji 可能由多个 code point 组成，旗帜和肤色修饰符还可能组成更长的字素簇。直接写 title.slice(0, 12)，既可能切断英文单词，也可能留下不可独立显示的符号。

如果产品规则只是“最多展示几行”，优先用 CSS 的 line-clamp；只有需要生成摘要、计算分享标题或把结果写进接口时，才在 JavaScript 中做语义截断。

用 granularity 选择正确的分段单位

中文使用 word 时，分段结果会受语言规则影响；它不是一个万能的“每个汉字一段”开关。要做头像旁的 12 个视觉字符，grapheme 通常更符合产品预期。

实现一个不拆词的标题摘要函数

function truncateTitle(title, limit, locale = 'zh') {
  if (!title || limit  limit ? '…' : '');
  }
  const segmenter = new Intl.Segmenter(locale, { granularity: 'word' });
  const parts = Array.from(segmenter.segment(title), item => item.segment);
  let result = '';
  for (const part of parts) {
    if (Array.from(result + part).length > limit) break;
    result += part;
  }
  return result === title ? result : result + '…';
}

这里的 Array.from 只是降级路径和长度估算，最终的分段边界由 Intl.Segmenter 决定。生产代码还应把空白、标点和省略号规则写成测试，而不是在模板里临时拼接。

字素截断更适合固定宽度的小组件

通知角标、用户昵称和搜索建议通常更在意“显示几个用户感知字符”，而不是词边界。这时把粒度切换为 grapheme：

function takeGraphemes(value, limit) {
  const items = typeof Intl.Segmenter === 'function'
    ? Array.from(new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(value), x => x.segment)
    : Array.from(value);
  return items.length > limit ? items.slice(0, limit).join('') + '…' : value;
}

降级使用 Array.from 比 split('') 安全，因为它至少不会把常见的代理项 emoji 拆开。不过复杂的零宽连接符序列在旧环境仍可能有差异，组件测试中应放入家庭 emoji、旗帜和带修饰符的符号。

能力检测和测试边界要一起做

Intl.Segmenter 属于运行时能力，不要只看构建目标。首屏渲染、服务端渲染和旧 WebView 可能处在不同环境，建议把检测收口在一个工具函数中，并为以下输入固定断言：

• 中英文混排：前端 API design guide 不应截成半个英文单词。
• emoji 组合：👨‍👩‍👧‍👦 应作为一个可见单元处理。
• 标点与空格：省略号前不要留下多余空格或孤立标点。
• 空标题、零长度和负数限制：结果应稳定，不抛出异常。

如果文本最终仍交给 CSS 排版，JavaScript 摘要不应试图模拟像素宽度；字体、缩放和容器宽度都会改变视觉结果。

常见问题

Intl.Segmenter 能精确计算标题占用多少像素吗？

不能。它解决的是语义或字素边界，不是字体测量。像素宽度需要浏览器布局或 Canvas 测量，卡片展示优先交给 CSS。

中文标题应该使用 word 还是 grapheme？

需要保留词义时用 word，只关心固定数量的视觉字符时用 grapheme。两者的产品目标不同。

旧浏览器不支持 Intl.Segmenter 怎么办？

短文本可以用 Array.from 做基础降级，复杂语言或强一致场景则应引入经过评估的分词 polyfill，并在目标 WebView 上做真实测试。

把截断规则放回真实的展示场景

摘要、通知和昵称不是同一类文本：摘要要保护词边界，说明更适合按句子保留，窄组件则要保护字素。先确定用户看到的边界，再选择 word、sentence 或 grapheme，并为降级环境留下可读结果，截断就不会只剩一个看似简单的数字。