JavaScript 中使用 Intl.Segmenter 进行国际文本分割

JavaScript 中使用 Intl.Segmenter 进行国际文本分割

了解 Intl.Segmenter 如何改进 JavaScript 中的文本分段以实现国际化

在 JavaScript 的广阔领域中,Intl对象在促进语言敏感的字符串比较、数字格式化以及日期和时间格式化方面发挥着关键作用。在其众多令人印象深刻的功能中,最引人注目的是Intl.Segmenter。这个强大的工具可以实现区域设置敏感的文本分段,从而更轻松地从字符串中提取有意义的项目,例如字素、单词或句子。

对国际分段器的需求

您可能想知道为什么我们有split()这个方法还需要Intl.Segmenter.为了理解这一点,让我们举一个简单的例子。假设我们想将一个字符串分解成句子。基本方法可能如下所示:

javascript 复制代码
'Hello there! How are you doing?'.split(/[.!?]/);

这段代码会给我们一个数组['Hello there', ' How are you doing', '']:虽然它似乎有效,但存在一些问题:

  1. 用作分隔符的标点符号现在消失了。
  2. 某些生成的字符串中有前导空格。
  3. 这种方法对语言不敏感。它对于不使用.!?来结束句子的语言效果不佳。

假设我们正在处理一个日语字符串:"吾辈は猫である。名前はたぬき。",它翻译为"我是一只猫。我的名字是狸猫。"我们的简单split()方法是不够的。这就是Intl.Segmenter起作用的地方!

国际分段器的原理

Intl.Segmenter允许我们将字符串分割成有意义的部分。我们只需要定义一个区域设置和粒度(可以是一个句子、单词或字素),它就可以分割任何字符串。

这是使用的示例Intl.Segmenter

ini 复制代码
const germanSegmenter = new Intl.Segmenter('de', {  
granularity: 'word'  
});  
const germanSegments = germanSegmenter.segment('Was geht ab, Freunde?');

在此片段中,我们将德语字符串分解为单词。

Segmenter.segment的返回

segment()方法不返回数组,而是返回一个可迭代对象。要访问所有段,我们可以使用数组扩展、Array.from()for...of循环。

您可以这样做:

ini 复制代码
const germanSegmenter = new Intl.Segmenter('de', {  
granularity: 'sentence'  
});  
const germanSegments = germanSegmenter.segment('Was geht ab, Freunde?');  
  
console.log([...germanSegments]);  
console.log(Array.from(germanSegments));  
for (let segment of germanSegments) {  
console.log(segment);  
}

每个段包括原始字符串值 ( input)、原始字符串中的字符索引 ( index) 和实际段字符串 ( segment)。

将段映射到其字符串值

如果要将段映射到其字符串值,可以使用 的第二个参数Array.from(),它是一个映射函数。

这是一个例子:

ini 复制代码
const germanSegmenter = new Intl.Segmenter('de', {  
granularity: 'sentence'  
});  
const germanSegments = germanSegmenter.segment('Was geht ab?');  
  
console.log(Array.from(germanSegments, s => s.segment));

使用 isWordLike 属性

将字符串拆分为单词时,所有段都包含空格和换行符。值得庆幸的是,Intl.Segmenter提供了一个isWordLike可以帮助过滤掉这些的属性。就是这样:

ini 复制代码
const germanSegmenter = new Intl.Segmenter('de', {  
granularity: 'word'  
});  
const germanSegments = germanSegmenter.segment('Was geht ab?');  
  
console.log([...germanSegments].filter(s => s.isWordLike));

在此示例中,我们过滤掉所有非单词的片段。因此,空格、标点符号和换行符将从结果中排除。

使用 Intl.Segmenter 处理表情符号

令人兴奋的应用之一Intl.Segmenter是它能够将字符串分割成视觉表情符号。表情符号可能非常复杂,尤其是随着由多个代码点组成的复合表情符号的出现。

让我们考虑一下这串表情符号:"🫣🫵👨‍👨‍👦‍👦"。

如果我们尝试按代码单元甚至代码点拆分它,我们将不会得到预期的结果:

ini 复制代码
const emojis = '🫣🫵👨‍👨‍👦‍👦';  
  
console.log(emojis.split('')); // Split by code units  
console.log([...emojis]); // Split by code points

然而,Intl.Segmenter优雅地处理这个问题:

ini 复制代码
const emojis = '🫣🫵👨‍👨‍👦‍👦';  
  
const segmenter = new Intl.Segmenter('en', {  
granularity: 'grapheme'  
});  
console.log(Array.from(segmenter.segment(emojis), s => s.segment));

在这种情况下,我们将每个复合表情符号作为单独的字素。

总结

随着 Web 应用程序的复杂性和全球化不断增长,像这样的工具Intl.Segmenter可能会改变游戏规则。它为 JavaScript 带来了语言感知的字符串处理,使得分段等任务不仅成为可能,而且相对简单。

相关推荐
有意义18 分钟前
this 不是你想的 this:从作用域迷失到调用栈掌控
javascript·面试·ecmascript 6
前端涂涂19 分钟前
第2讲:BTC-密码学原理 北大肖臻老师客堂笔记
前端
能不能送我一朵小红花34 分钟前
基于uniapp的PDA手持设备红外扫码方案
前端·uni-app
风止何安啊1 小时前
别被 JS 骗了!终极指南:JS 类型转换真相大揭秘
前端·javascript·面试
拉不动的猪1 小时前
深入理解 Vue keep-alive:缓存本质、触发条件与生命周期对比
前端·javascript·vue.js
|晴 天|1 小时前
WebAssembly:为前端插上性能的翅膀
前端·wasm
孟祥_成都1 小时前
你可能不知道 react 组件中受控和非受控的秘密!
前端
火车叼位1 小时前
ast-grep:结构化搜索与重构利器
前端
over6971 小时前
深入理解 JavaScript 原型链与继承机制:从 instanceof 到多种继承模式
前端·javascript·面试
烂不烂问厨房1 小时前
前端实现docx与pdf预览
前端·javascript·pdf