大家好，我是 ConardLi。
假設我們現(xiàn)在有這樣一個需求，把一段話拆分成有意義的句子：
你好，我是 ConardLi。我來了！你是誰？你在哪？
你可能會第一時間想到，用 split 按所有可能斷句的標點符號分割就好了，比如下面的代碼：
var txt = '你好，我是 ConardLi。我來了！你是誰？你在哪？'
txt.split(/[。？！]/);
// ['你好，我是 ConardLi', '我來了', '你是誰', '你在哪', '']
看起來結(jié)果還不錯，但是可以斷句的中文標點符號只有這三個嗎？顯然不是，如果我們想要處理更復雜的文本，需要持續(xù)完善這個正則，另外這樣分割還有一個最大的問題是標點符號會在分割后的結(jié)果中丟失。
如果我們想要按詞語進行分割，而不是語句呢？
如果我們想要分割的文本是英語、阿拉伯語呢...
// 中文
const cn = '你好，我是 ConardLi。我來了！你是誰？你在哪？';
// 英文
const en = 'Hello, I'm ConardLi. I'm coming! Who are you? Where are you?';
// 阿拉伯語
const ar = '?????? ??? ????????. ??? ????! ?? ???? ??? ????';
這時候 split 可能就會表示無能為力了！
Intl API
Intl 是 ECMAScript 國際化 API 的一個命名空間，它提供了精確的字符串對比、數(shù)字格式化，和日期時間格式化能力。我們今天主要來看一下它提供的字符串分割能力！
Intl.Segmenter 對象專門為語言敏感的文本分割而生，它允許你將一個字符串分割成有意義的片段（字、詞、句），下面我們看看它對以上三種語言的分割結(jié)果：
中文
const segmenter = new Intl.Segmenter(
'zh', { granularity: 'sentence' }
);
console.log(
Array.from(
segmenter.segment(你好，我是 ConardLi。我來了！你是誰？你在哪？),
s => s.segment
)
);
// ['你好，我是 ConardLi。', '我來了！', '你是誰？', '你在哪？']
英語
const segmenter = new Intl.Segmenter(
'en', { granularity: 'sentence' }
);
console.log(
Array.from(
segmenter.segment(`Hello, I'm ConardLi. I'm coming! Who are you? Where are you?`),
s => s.segment
)
);
// ["Hello, I'm ConardLi. ", "I'm coming! ", 'Who are you? ', 'Where are you?']
阿拉伯語
const segmenter = new Intl.Segmenter(
'ar', { granularity: 'sentence' }
);
console.log(
Array.from(
segmenter.segment(`?????? ??? ????????. ??? ????! ?? ???? ??? ????`),
s => s.segment
)
);
// ['?????? ??? ????????. ', '??? ????! ', '?? ???? ', '??? ????']
Intl 的兼容性也還不錯，除了 Firefox 目前還沒有對它提供支持，其他的各大瀏覽器均已支持。
下面我們來了解一些 Intl.Segmenter 的細節(jié)。
構(gòu)造參數(shù)
在上面的示例中，我們在 Intl.Segmenter 的構(gòu)造函數(shù)傳入了兩個參數(shù)。
第一個參數(shù)是語言地域編碼，結(jié)構(gòu)是：'語言編碼-地區(qū)編碼'，因為同樣的語言在不同的地區(qū)也可能會有區(qū)別，比如下面的一些常見示例：
- zh ：中文
- zh-CN ：簡體中文
- zh-HK ：香港地區(qū)的中文（繁體中文）
- en ：英語
- en-US ：美式英語
- en-CB ：英式英語
第二個參數(shù)是一些更詳細的配置參數(shù)，我們主要關(guān)注 granularity，它有三個值，分別表示我們要將字符串分割為句、詞、還是字：
const segmenter = new Intl.Segmenter(
'zh', { granularity: 'sentence' } // 句
);
// ['你好，我是 ConardLi。', '我來了！', '你是誰？', '你在哪？']
const segmenter = new Intl.Segmenter(
'zh', { granularity: 'word' } // 詞
);
// ['你好', '，', '我是', ' ', 'ConardLi', '。', '我來', '了', '！', '你是', '誰', '？', '你在', '哪', '？']
const segmenter = new Intl.Segmenter(
'zh', { granularity: 'grapheme' } // 字
);
// ['你', '好', '，', '我', '是', ' ', 'C', 'o', 'n', 'a', 'r', 'd', 'L', 'i', '。', '我', '來', '了', '！', '你', '是', '誰', '？', '你', '在', '哪', '？']
返回值
在上面的例子中可以發(fā)現(xiàn)，我們使用 Array.from 對 segment 的返回值進行了處理：
console.log(
Array.from(
segmenter.segment(你好，我是 ConardLi。我來了！你是誰？你在哪？),
s => s.segment
)
);
這是因為它返回的并不是一個數(shù)組，而是一個 iterable 對象，如果訪問里面的字段，我可以用 for-of 或者使用 Array.from 函數(shù)轉(zhuǎn)換為數(shù)組。
const segmenter = new Intl.Segmenter('zh', {
granularity: 'sentence'
});
const segments = segmenter.segment('...');
// 結(jié)構(gòu)轉(zhuǎn)為數(shù)組
console.log([...segments]);
// Array.from 轉(zhuǎn)為數(shù)組
console.log(Array.from(segments));
// for-of 遍歷
for (let segment of segments) {
console.log(segment);
}完整的返回值包括分割后的字符、字符所在位置、輸入的完整內(nèi)容：
另外，在前面的示例中，當我們將文字分割為詞時，可以發(fā)現(xiàn)標點符號、空格等都被分割出來了：
const segmenter = new Intl.Segmenter(
'zh', { granularity: 'word' } // 詞
);
const result = segmenter.segment(`你好，我是 ConardLi。', '我來了！', '你是誰？', '你在哪？`)
Array.from( result , s => s.segment)
// ['你好', '，', '我是', ' ', 'ConardLi', '。', '我來', '了', '！', '你是', '誰', '？', '你在', '哪', '？']
這時返回值里還會包括一個 isWordLike 屬性，可以用于過濾是否真的為詞語：
Array.from(result).filter(s => s.isWordLike).map(s => s.segment)
// ['你好', '我是', 'ConardLi', '我來', '了', '你是', '誰', '你在', '哪']
處理 emojis
一般我們要處理的文本里如果包括了 emojis ，那問題就可能變得麻煩起來了...
我們來看下面的示例：
const str1 = '12345';
const str2 = '12345?????';
console.log(str1.length); // 5
console.log(str2.length); // 10
str1.split('')
// ['1', '2', '3', '4', '5']
str2.split('')
// ['1', '2', '3', '4', '5', '\uD83D', '\uDE35', '?', '\uD83D', '\uDCAB']
str2.replaceAll(/\D/g, '0')
// '1234500000'
為啥會出現(xiàn)這種現(xiàn)象呢？我們先來回顧一下計算機最基礎的概念：字符集與編碼：
字符集 (Character Set) 是字符的集合，定義系統(tǒng)能處理哪些字符；編碼( Encoding )則規(guī)定這些字符在計算機內(nèi)部的表示方式。
Unicode 是一套標準，包含多語言統(tǒng)一的字符集及其相關(guān)編碼，以及在這個字符集上進行文本處理的相關(guān)規(guī)則。
在 Unicode 中，每個字符被分配了一個數(shù)值 (Code Point，代碼點) 和一個名稱。比如字母 A 的名稱是 LATIN CAPITAL LETTER A (大寫拉丁字母A)。它對應的數(shù)值是 65，通常寫作 U+0041( 41 是十六進制數(shù)，等于 10 進制的 65)。
字素是文本在書寫時最小的單位，可以被理解為單獨的“字”。
在 Unicode 標準中，字符（Character）一般指代碼點（Code Point）。通常，一個字素就是一個字符。但是，也有些字素是由多個字符序列組合而成的。比如字母 é 可以用字母 e (U+0065) 加上重音符 (U+0301) 組合而成。像重音符這樣用于修飾前一個字符的字符，被稱為組合字符（Combining Character）。
比如你看到的這個字符：啊?????????????????????? ，就是個組合字符...
現(xiàn)在對于上面的 emojis 出現(xiàn)的字符串分割問題是不是就容易理解了，因為很多 emojis 都是下面這樣的組合字符：
?? + ? = ???
?? - U+1F3FB
? - U+270B
??? - U+270B U+1F3FB
'???'.split('') // ['?', '\uD83C', '\uDFFB']
那么下面回歸正題了，Intl.Segmenter 的出現(xiàn)也可以解決這樣的組合字符的分割問題：
'12345?????'.split('')
// ['1', '2', '3', '4', '5', '\uD83D', '\uDE35', '?', '\uD83D', '\uDCAB']
const segmenter = new Intl.Segmenter('en', {
granularity: 'grapheme'
});
Array.from(
segmenter.segment('12345?????'),
s => s.segment
)
// ['1', '2', '3', '4', '5', '?????']最后在多提一下，最近有一個新的 ECMAScript 提案，為正則表達式新增了一個新的標識符 '/v' （目前已經(jīng)到達 stage 3）就是用來解決正則中的組合字符匹配的問題的：
'12345?????'.replaceAll(/\D/g, '0')
// '1234500000'
'12345?????'.replaceAll(/\D/gv, '0')
// '123450'
本來是講字符串分割的，寫著寫著有點跑偏了，大家湊合著看吧 ...
???????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·???????????????????????·??·????????????
