自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

你可能不知道的字符串分割技巧

作者：前端小智
開(kāi)發(fā) 前端
Intl.Segmenter 是一個(gè) JavaScript 對(duì)象，用于對(duì)文本進(jìn)行區(qū)域設(shè)置敏感的分段。它可以幫助我們從字符串中提取有意義的項(xiàng)目，如單詞、句子或字形。

最近看到一個(gè)拆分字符串的新方式，就是使用Intl.Segmenter將emoji字符串分割成字形的方法。

我以前都沒(méi)用過(guò)這個(gè)Intl對(duì)象，現(xiàn)在我們一起來(lái)看看。

假設(shè)你想把用戶(hù)輸入拆分成句子，看起來(lái)是一個(gè)簡(jiǎn)單的 split() 任務(wù)...但這個(gè)問(wèn)題有很多細(xì)微之處。

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

使用 split() 會(huì)丟失定義的分隔符，并在所有地方包含這些空格。而且因?yàn)樗蕾?lài)于硬編碼的分隔符，所以對(duì)語(yǔ)言不敏感。

我不懂日語(yǔ)，但你會(huì)如何嘗試將下面的字符串分割成單詞或句子？

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

普通的字符串方法在這里是沒(méi)有用的，但是Intl JavaScript API 確能解決這個(gè)問(wèn)題。

Intl.Segmenter 來(lái)救場(chǎng)

Intl.Segmenter 是一個(gè) JavaScript 對(duì)象，用于對(duì)文本進(jìn)行區(qū)域設(shè)置敏感的分段。它可以幫助我們從字符串中提取有意義的項(xiàng)目，如單詞、句子或字形。它的使用方式類(lèi)似于其他的構(gòu)造函數(shù)，可以使用 new 關(guān)鍵字來(lái)創(chuàng)建一個(gè) Intl.Segmenter 對(duì)象。

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

在上面的代碼中，locale 是字符串，表示要使用的區(qū)域設(shè)置。granularity 是字符串，表示分段的粒度。它可以是 "grapheme"（字形）、"word"（單詞）或 "sentence"（句子）之一。

圖片

Intl.Segmenter 有一個(gè)很有用的方法叫做 segment()，它可以將文本拆分為有意義的段。

const segments = segmenter.segment(text);

在上面的代碼中，text 是要拆分的文本，segments 是返回的段的迭代器。你可以使用 for-of 循環(huán)來(lái)遍歷段，或者使用 Array.from() 將它們轉(zhuǎn)換為數(shù)組。

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 對(duì)象還有其他一些有用的方法，比如 breakType，用于檢索分段的類(lèi)型（例如，句子的末尾是否包含句號(hào)）。另一個(gè)有用的方法是 breakType，用于檢索分段的類(lèi)型。

例如：

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 還有一個(gè)很有用的靜態(tài)方法叫做 supportedLocalesOf()，它可以幫助你確定瀏覽器是否支持特定的區(qū)域設(shè)置。

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

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

在上面的代碼中，supported 數(shù)組包含瀏覽器支持的區(qū)域設(shè)置。

如果你想要對(duì)文本進(jìn)行更細(xì)粒度的分段，你可以使用 Intl.ListFormat 對(duì)象。它可以幫助你將文本拆分為有意義的列表項(xiàng)。

使用方式類(lèi)似于 Intl.Segmenter，你可以使用 new 關(guān)鍵字創(chuàng)建一個(gè) Intl.ListFormat 對(duì)象。

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

在上面的代碼中，locale 是字符串，表示要使用的區(qū)域設(shè)置。style 和 type 是對(duì)象的屬性，用于指定列表格式。style 可以是 "long" 或 "short"，type 可以是 "conjunction"（并列）或 "disjunction"（或）。

Intl.ListFormat 有一個(gè)很有用的方法叫做 format()，它可以將數(shù)組轉(zhuǎn)換為有意義的列表。

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

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

在上面的代碼中，formatted 是轉(zhuǎn)換后的列表字符串。

Word 的顆粒度帶有一個(gè)額外的isWordLike屬性

如果把一個(gè)字符串分割成單詞，所有的片段都包括空格和換行符。使用isWordLike屬性將它們過(guò)濾掉。

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 }
// ]

上面通過(guò)isWordLike進(jìn)行過(guò)濾會(huì)刪除標(biāo)點(diǎn)符號(hào)，如.、-、或？。

使用 Intl.Segmenter 來(lái)分割 emojis

如果你想把一個(gè)字符串分割成可視化的emojis，Intl.Segmenter也是一個(gè)很好的幫助。

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
));
// ['??', '??', '???????????']

請(qǐng)注意，字形也包括空格和 "正常 "字符。

編輯中可能存在的bug沒(méi)法實(shí)時(shí)知道，事后為了解決這些bug,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

參考

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

最后

本文譯自：https://marmelab.com/blog/2022/09/20/react-i-love-you.html

責(zé)任編輯：武曉燕 來(lái)源： 大遷世界
字符串分割技巧
相關(guān)推薦

2022-12-09 15:06:26

字符串Intl字符串分割

2015-08-13 09:03:14

調(diào)試技巧

2020-01-29 19:40:36

Python美好，一直在身邊Line

2021-01-05 11:22:58

Python字符串代碼

2022-09-20 11:58:27

NpmNode.js

2024-03-04 00:00:00

Kubernetes技巧API

2012-11-23 10:57:44

Shell

2019-11-20 10:25:06

sudoLinux

2020-11-03 09:51:04

JavaScript開(kāi)發(fā) 技巧

2017-11-07 21:58:25

前端JavaScript調(diào)試技巧

2017-02-23 19:42:55

AS Android代碼

2021-02-28 08:34:14

CSS outline-off負(fù)值技巧

2023-02-27 09:20:24

絕對(duì)定位CSS

2023-01-29 09:46:47

Dialog彈窗模態(tài)

2014-12-08 10:39:15

2019-11-25 14:05:47

Python裝飾器數(shù)據(jù)

2021-02-21 06:36:57

運(yùn)算技巧按位

2021-02-16 09:02:59

Python代碼技巧

2021-07-12 07:59:06

安全 HTML 屬性

2014-04-10 13:15:54

PythonPython技巧
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)