我劝你必须知道——Intl.Segmenter

Intl.Segmenter 使用指南

Intl.Segmenter 是 JavaScript 国际化 API 的一部分，用于将文本按照语言特定的规则分割成有意义的片段（如字素、词或句）。这对于处理复杂文本（如包含组合字符或特定语言规则）特别有用。

基本概念

什么是文本分段？

文本分段是指将字符串按照特定语言的规则分割为有意义的单元：

字素（grapheme）：用户感知的一个"字符"
单词（word）：语言定义的单词边界
句子（sentence）：语言定义的句子边界

为什么需要 Segmenter？

JavaScript 的字符串操作（如 split('')）基于 UTF-16 编码单元，不能正确处理：

组合字符（如 "café" 中的 é 可能是 e + ´）
复杂脚本（如阿拉伯语、印度语系）
特定语言的单词边界规则

创建 Segmenter

javascript 复制代码

const segmenter = new Intl.Segmenter([locales[, options]]);

参数

locales (可选)
- 字符串或字符串数组，指定语言环境
- 例如: "en-US", "zh-Hans-CN"
options (可选)
- granularity: 分段粒度
  - "grapheme" (默认): 字素级别（字素：语言书写系统的最小有意义单位)
  - "word": 单词级别
  - "sentence": 句子级别

使用示例

字素级别分段

javascript 复制代码

const segmenter = new Intl.Segmenter("zh", { granularity: "grapheme" });
const segments = segmenter.segment("你好👋世界");

for (const { segment } of segments) {
  console.log(segment);
}
// 输出:
// 你
// 好
// 👋
// 世
// 界

单词级别分段

javascript 复制代码

const segmenter = new Intl.Segmenter("en-US", { granularity: "word" });
const segments = segmenter.segment("Hello world! This is a test.");

for (const { segment, isWordLike } of segments) {
  console.log(segment, isWordLike);
}
// 输出:
// Hello true
//   false
// world true
// ! false
//   false
// This true
// ...

句子级别分段

javascript 复制代码

const segmenter = new Intl.Segmenter("zh", { granularity: "sentence" });
const segments = segmenter.segment("你好！这是一个测试。我们开始吧。");

for (const { segment } of segments) {
  console.log(segment);
}
// 输出:
// 你好！
// 这是一个测试。
// 我们开始吧。

分段结果属性

迭代分段结果时，每个对象包含：

segment: 分段内容
index: 在原字符串中的起始索引
input: 原始输入字符串
isWordLike (仅限 word 粒度): 是否为类似单词的内容

高级用法

获取分段位置信息

javascript 复制代码

const segmenter = new Intl.Segmenter("ja", { granularity: "word" });
const text = "こんにちは、世界！";
const segments = segmenter.segment(text);

for (const { segment, index } of segments) {
  console.log(`"${segment}" starts at position ${index}`);
}

创建分段数组

javascript 复制代码

const segmenter = new Intl.Segmenter("fr", { granularity: "grapheme" });
const text = "Été";
const segments = [...segmenter.segment(text)].map(({ segment }) => segment);
console.log(segments); // ["É", "t", "é"]

获取可视字符数量

错误示范，使用的 .length 无法正确获得可视长度

javascript 复制代码

const str = "我爱👨👩👧👦🇨🇳";
console.log(str.length); // 得到结果是：14

使用Intl.Segmenter 的 grapheme（分段粒度）可以得到正确的长度如下：

javascript 复制代码

const str = "我爱👨👩👧👦🇨🇳"
const segmenter = new Intl.Segmenter("en", {
  granularity: "grapheme",
});
const result = [...segmenter.segment(str)];

console.log(result.length); // 得到结果是：7

浏览器兼容性

Intl.Segmenter 是一个相对较新的 API：

Chrome 87+
Firefox 无原生支持
Safari 14.1+
Node.js 16+

对不支持的浏览器，可以使用 polyfill 如 Intl.Segmenter polyfill

实际应用场景

正确计算字符长度（考虑组合字符）
文本输入处理（如限制输入长度）
分词功能（自然语言处理）
文本编辑器的光标移动逻辑
文本高亮和选择操作

性能注意事项

对于大数据量文本处理：

考虑分段时的性能
可能需要分批处理
缓存 Segmenter 实例（创建成本较高）

Intl.Segmenter 提供了强大的文本处理能力，特别是在多语言应用的上下文中，可以更准确地处理文本边界问题。