如何在JavaScript中截断UTF-8字符串且不破坏多字节字符？

JavaScript原生的slice()、substring()等方法是基于UTF-16代码单元操作的，而像emoji这类Unicode astral平面字符（如😊）需要两个UTF-16代码单元组成，直接截断会拆分这些字符，导致出现无效符号。以下是几种可靠的解决方法：

方法1：使用Array.from()转换为字符数组 #

Array.from()会自动识别完整的Unicode字符，包括由多个UTF-16代码单元组成的字符，转换后再进行截断和拼接：

// 处理Emoji截断
const emojitext = "😊😊😊";
const chopped_emoji = Array.from(emojitext).slice(0, 1).join('');
document.getElementById("slice").innerHTML = chopped_emoji + " works!";

方法2：使用Unicode模式正则拆分字符串 #

通过带u标志的正则表达式，可以匹配完整的Unicode字符，再进行截断：

const emojitext = "😊😊😊";
// 用[\s\S]匹配任意字符，u标志启用Unicode模式
const charArray = emojitext.split(/[\s\S]/u);
// split会生成包含空字符串的数组，所以从索引1开始取
const chopped_emoji = charArray.slice(1, 2).join('');
document.getElementById("slice").innerHTML = chopped_emoji + " works!";

方法3：封装通用截断函数 #

如果需要频繁处理这类场景，可以封装一个通用函数，同时处理长度超出字符串总字符数的边界情况：

function truncateUnicode(str, maxLength) {
  if (maxLength <= 0) return '';
  const charList = Array.from(str);
  return charList.slice(0, maxLength).join('');
}

// 示例：混合普通字符和Emoji的截断
const mixedText = "😊JavaScript字符串截断😊";
const truncatedText = truncateUnicode(mixedText, 5);
console.log(truncatedText); // 输出 "😊Java"

原理说明 #

JavaScript字符串本质是UTF-16编码的序列，每个代码单元占2字节。而部分Unicode字符（如大部分emoji、某些特殊符号）属于"增补平面"，需要两个连续的UTF-16代码单元（代理对）才能表示。原生截断方法只按代码单元计数，会拆分代理对，导致无效字符；而Array.from()和带u标志的正则会识别完整的Unicode字符，确保截断时不会拆分这些多代码单元字符。

内容的提问来源于stack exchange，提问作者captain-nemo-10994