关于javascript:你可能不知道的字符串分割技巧

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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 units
console.log(emojis.split(''));
// ['\uD83E', '\uDEE3', '\uD83E', '\uDEF5', '\uD83D', '\uDE48']

// ----
// Split by code points
console.log([...emojis]);
// ['🫣', '🫵', '👨', '‍', '👨', '‍', '👦', '‍', '👦']

// ----
// Split by graphemes
const 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。