如何在不破壞多字節字符的情況下截斷 JavaScript 中的 UTF8 字符串？

Question

如果這里已經回答了這個問題，我深表歉意。 我找不到相關的線程。

我是 JavaScript 的新手。 我需要能夠以 UTF8 友好的方式截斷字符串。 目前，使用slice()和類似方法，字符串末尾的多字節字符被切成兩半，我得到無效字符。

 //Slicing Emojis var emojitext = ""; var chopped_emoji = emojitext.slice(0, 1); document.getElementById("slice").innerHTML = chopped_emoji + " is broken";

 <p id="slice"></p>

上面的代碼導致一個無效字符存儲在chopped_emoji中。 我如何確保不會發生這種情況？

Answer 1

JS 有一個新的分段 API用於處理字符串字符。 根據您需要的瀏覽器支持，它可能非常合適（您也可以對其進行 polyfill）。 您可以使用它來創建一個字素數組（即：屏幕上的視覺感知字母/單位）。 然后，您可以在該數組上使用.slice() ，然后將其.join()重新轉換為字符串：

 const str = ""; const segmenter = new Intl.Segmenter("en", {granularity: 'grapheme'}); const segItr = segmenter.segment(str); const segArr = Array.from(segItr, ({segment}) => segment); const choppedEmoji = segArr.slice(0, 1).join(''); // Examples console.log("With segmentation", choppedEmoji); console.log("Without segmentation", str.slice(0, 1));

上面處理了很多邊緣情況，例如代理對（例如 emojis）、具有零寬度連接符的字符（例如 emojis ）、具有變體選擇器的字符（例如 ❤️）和復合對字符（例如ñ ） .

對於更簡單的字符，您可以使用Array.from()或擴展語法 ( ... ) 將字符串轉換為按字符串的代碼點分組的數組（表情符號可以由多個代碼單元組成，這些代碼單元對單個代碼進行編碼點），這樣拆分時，可以避免在其中一個代碼單元上拆分（這會導致錯誤字符）：

 const emojitext = ""; const choppedEmoji = [...emojitext].slice(0, 1).join(''); console.log(choppedEmoji + " is not broken:)");

但是如果你拋出類似的東西不過，在上面的例子中，你會發現它沒有按預期工作，因為是一個字素，由多個由零寬度連接字符連接的代碼點組成，因此上述方法不適用於它，但分段器選項將（與由變體選擇器和復合字符組成的字符相同）。