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 带来了语言感知的字符串处理,使得分段等任务不仅成为可能,而且相对简单。

相关推荐
Autumn_ing5 小时前
Design.md生成UI怎么验收?举例运营后台的颜色、状态和数据核对
前端·ui·ai·设计系统·paico·ai生成ui·design.md
远离UE46 小时前
UE5 Substrate Thin Film 源码拆析
开发语言·javascript·ue5
keyipatience6 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
朱涛的自习室6 小时前
我给 Gemini 4 和 DeepSeek 搞了套「末位淘汰」,AI 干活会更猛吗?(Day 3)
android·前端·后端
java1234_小锋8 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
鶴哥只手遮天9 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方9 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户530429765799 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
子林super9 小时前
MySQL三大日志(binlog、redo log和undo log)详解
面试