Intl.Segmenter字符串分割技巧

更新日期: 2022-12-22阅读: 696标签: 字符串

最近看到一个拆分字符串的新方式,就是使用Intl.Segmenter将emoji字符串分割成字形的方法。

我以前都没用过这个Intl对象,现在我们一起来看看。

假设你想把用户输入拆分成句子,看起来是一个简单的 split() 任务...但这个问题有很多细微之处。

'Hello! How are you?'.split(/[.!?]/);
// ['Hello', ' How are you', '']

使用 split() 会丢失定义的分隔符,并在所有地方包含这些空格。而且因为它依赖于硬编码的分隔符,所以对语言不敏感。

我不懂日语,但你会如何尝试将下面的字符串分割成单词或句子?

// I am a cat. My name is Tanuki.
'吾輩は猫である。名前はたぬき。'

普通的字符串方法在这里是没有用的,但是Intl JavaScript api 确能解决这个问题。


Intl.Segmenter 来救场

Intl.Segmenter 是一个 JavaScript 对象,用于对文本进行区域设置敏感的分段。它可以帮助我们从字符串中提取有意义的项目,如单词、句子或字形。它的使用方式类似于其他的构造函数,可以使用 new 关键字来创建一个 Intl.Segmenter 对象。

const segmenter = new Intl.Segmenter(locale, { granularity: "word" });

在上面的代码中,locale 是字符串,表示要使用的区域设置。granularity 是字符串,表示分段的粒度。它可以是 "grapheme"(字形)、"word"(单词)或 "sentence"(句子)之一。

Intl.Segmenter 有一个很有用的方法叫做 segment(),它可以将文本拆分为有意义的段。

const segments = segmenter.segment(text);

在上面的代码中,text 是要拆分的文本,segments 是返回的段的迭代器。你可以使用 for-of 循环来遍历段,或者使用 Array.from() 将它们转换为数组。

const text = "Hello, world! How are you today?";
const segmenter = new Intl.Segmenter("en-US", { granularity: "sentence" });
const segments = segmenter.segment(text);

for (const segment of segments) {
  console.log(segment);
}

// Output:
// { index: 0, value: "Hello, world!", breakType: "", breakIndex: 12 }
// { index: 13, value: "How are you today?", breakType: "", breakIndex: 31 }

Intl.Segmenter 对象还有其他一些有用的方法,比如 breakType,用于检索分段的类型(例如,句子的末尾是否包含句号)。另一个有用的方法是 breakType,用于检索分段的类型。

例如:

const text = "Hello, world! How are you today?";
const segmenter = new Intl.Segmenter("en-US", { granularity: "sentence" });
const segments = segmenter.segment(text);

for (const segment of segments) {
  console.log(segment.breakType);
}

// Output:
// "exclamation"
// "question"

Intl.Segmenter 还有一个很有用的静态方法叫做 supportedLocalesOf(),它可以帮助你确定浏览器是否支持特定的区域设置。

const supported = Intl.Segmenter.supportedLocalesOf(["en-US", "zh-CN"]);
console.log(supported);

// Output:
// ['en-US', 'zh-CN']

在上面的代码中,supported 数组包含浏览器支持的区域设置。

如果你想要对文本进行更细粒度的分段,你可以使用 Intl.ListFormat 对象。它可以帮助你将文本拆分为有意义的列表项。

使用方式类似于 Intl.Segmenter,你可以使用 new 关键字创建一个 Intl.ListFormat 对象。

const listFormat = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });

在上面的代码中,locale 是字符串,表示要使用的区域设置。style 和 type 是对象的属性,用于指定列表格式。style 可以是 "long" 或 "short",type 可以是 "conjunction"(并列)或 "disjunction"(或)。

Intl.ListFormat 有一个很有用的方法叫做 format(),它可以将数组转换为有意义的列表。

const list = ["apple", "banana", "orange"];
const formatted = listFormat.format(list);
console.log(formatted);

// Output:
// "apple, banana, and orange"

在上面的代码中,formatted 是转换后的列表字符串。


Word 的颗粒度带有一个额外的isWordLike属性

如果把一个字符串分割成单词,所有的片段都包括空格和换行符。使用isWordLike属性将它们过滤掉。

const segmenterDe = new Intl.Segmenter('de', {
  granularity: 'word'
});
const segmentsDe = segmenterDe.segment('Was geht ab?');

console.log([...segmentsDe]);
// [
//   { segment: 'Was', index: 0, input: 'Was geht ab?', isWordLike: true },
//   { segment: ' ', index: 3, input: 'Was geht ab?', isWordLike: false },
//   ...
// ]

console.log([...segmentsDe].filter(s => s.isWordLike));
// [
//   { segment: 'Was', index: 0, input: 'Was geht ab?', isWordLike: true},
//   { segment: 'geht', index: 4, input: 'Was geht ab?', isWordLike: true },
//   { segment: 'ab', index: 9, input: 'Was geht ab?', isWordLike: true }
// ]

上面通过isWordLike进行过滤会删除标点符号,如.、-、或?。


使用 Intl.Segmenter 来分割 emojis

如果你想把一个字符串分割成可视化的emojis,Intl.Segmenter也是一个很好的帮助。

const emojis = '';
console.log(emojis.split('')); // ['\uD83E', '\uDEE3', '\uD83E', '\uDEF5', '\uD83D', '\uDE48']
console.log([...emojis]);

const segmenter = new Intl.Segmenter('en', {
granularity: 'grapheme'
});
const segments = segmenter.segment(emojis);

console.log(Array.from(segmenter.segment(emojis),s => s.segment));

请注意,字形也包括空格和 "正常 "字符。

原文来自:https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

链接: https://fly63.com/article/detial/12261

字符串拼接引发的BUG

我们先温习一下JavaScript基础知识。在JavaScript中,根据+左右两边变量的类型的不同,+符号可以用于数字相加或则字符串拼接。我用了string += +string这样的写法,也就是说:由于写代码的时候拷贝黏贴,不小心整了一个多余的+号?

原生js去掉字符串2端空格Trim()方法总汇

在我们使用JavaScript编写脚本的时候,经常会遇到把字符串两边的空格进行清除,它不想其它语言会有内置方法函数处理,js需要我们自己代码来实现。如果用过jquery库的话,它提供了trim方法,我们可以直接使用。

js中String.prototype实现string过滤空格_字符串空格过滤

我们都知道prototype可以向对象上添加属性和方法,语法如下:object.prototype.name=value。这篇文章就是利用prototype,为字符串扩展过滤空格的方法

字符串的格式化功能的实现_js实现连接字符串及变量

在开发中过程中,经常会遇到使用占位符的形式来格式化字符串,我们通过js扩展String.prototype.format字符串拼接的功能,实现如下:

es6中新增的字符串方法

es6中新增的字符串方法:字符串模板用法${变量名}、字符串查找方法string.includes(要找得字符串)、检查字符串是否已xxx开头、字符串重复方法string.repeat(次数)、字符串填充string.padStart

js中字符串截取的几种方式

众所周知,js提供了很多字符串截取的方式。下面主要介绍js中slice(),splice(),split(),substring(),substr()的使用和区别,主要介绍了JavaScript截取、切割字符串的技巧,需要的朋友可以参考

JavaScript:生成重复的字符串(字符串乘法)

看到一个题目要求写一个函数times,输出str重复num次的字符串。除了利用循环还有几种方法:递归,结合三元表达式更简洁。数组的 join() 方法。ES6的 repeat() 方法。ES6目前没有全部兼容。

常用的String原型

对于常用的字符串原型的举例:在字符串末尾追加字符串 、删除指定索引位置的字符,索引无效将不删除任何字符 、删除指定索引区间的字符串 、检查字符串是否以subStr结尾

使用String. localeCompare比较字符串

javascript提供stringA.localeCompare(stringB)方法,来判断一个字符串stringB是否排在stringA的前面。返回值: 如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。

js里面判断一个字符串是否包含某个子串的方法

ES6的includes, 返回 Boolean、ES5 indexOf,返回子串起始位置,不包含则返回-1、search,返回起始位置或者-1、lodash includes, JavaScript 工具库

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!