微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
最近看到一个拆分字符串的新形式,就是应用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 = '';// ----// Split by code unitsconsole.log(emojis.split(''));// ['\uD83E', '\uDEE3', '\uD83E', '\uDEF5', '\uD83D', '\uDE48']// ----// Split by code pointsconsole.log([...emojis]);// ['', '', '', '', '', '', '', '', '']// ----// Split by graphemesconst segmenter = new Intl.Segmenter('en', { granularity: 'grapheme'});const segments = segmenter.segment(emojis);console.log(Array.from( segmenter.segment(emojis), s => s.segment));// ['', '', '']
请留神,字形也包含空格和 "失常 "字符。
编辑中可能存在的bug没法实时晓得,预先为了解决这些bug,花了大量的工夫进行log 调试,这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
参考
- https://www.stefanjudis.com/t...
- https://2ality.com/2022/11/re...
原文:https://www.stefanjudis.com/t...
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。