如何在不破坏多字节字符的情况下截断 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:)");

但是如果你抛出类似的东西不过，在上面的例子中，你会发现它没有按预期工作，因为是一个字素，由多个由零宽度连接字符连接的代码点组成，因此上述方法不适用于它，但分段器选项将（与由变体选择器和复合字符组成的字符相同）。