按字节长度截断字符串：如何识别无效UTF-8字符？

为啥常规方法踩坑 #

用encode→slice→decode这套流程截断字符串，会遇到两类棘手问题：

1. 字节断在半路上：截断点刚好卡在多字节字符（比如3字节的基础Emoji、4字节的肤色修饰符）中间，解码出来要么是乱码�，要么直接跳过无效字节，结果完全不符合预期。
2. 组合字符被拆碎：像✊🏼这种带肤色的Emoji，是基础Emoji✊加肤色修饰符🏼拼合出来的，截断点如果刚好在两者之间，会得到单独的✊，这显然不是想要的完整语义效果。

先搞懂背后的原因 #

UTF-8的字节规则 #

UTF-8字符的字节结构是固定的：

• 单字节：开头为0（比如英文、数字）
• 双字节：开头110，后面跟一个10开头的字节
• 三字节：开头1110，后面跟两个10开头的字节（比如大部分基础Emoji）
• 四字节：开头11110，后面跟三个10开头的字节（比如肤色修饰符、部分复杂Emoji）

如果截断到的字节是10开头的续字节，或者只截到多字节字符的前几个字节，解码时必然出问题。

组合Emoji的特殊情况 #

✊🏼其实是两个独立的Unicode码点：✊（U+270A，占3字节UTF-8）和🏼（U+1F3FC，占4字节UTF-8），只是渲染时会合并显示。如果截断点在✊的3字节之后、🏼的4字节之前，解码后会得到单独的✊；如果截断点在🏼的字节中间，就会出现替换字符�。

靠谱的解决思路 #

分两步走：先保证截断的字节都是完整的UTF-8字符，再处理语义上不完整的组合字符。

第一步：把字节截断在合法位置 #

写个函数从截断点往前回溯，直到找到能组成完整UTF-8字符的起始位置：

function getValidTruncationIndex(bytes, targetLength) {
  if (targetLength >= bytes.length) return bytes.length;
  let index = targetLength;
  // 跳过所有续字节（10开头的字节）
  while (index > 0 && (bytes[index] & 0b11000000) === 0b10000000) {
    index--;
  }
  // 检查当前起始字节需要多少后续字节，确保截断后是完整字符
  const startByte = bytes[index];
  if ((startByte & 0b11100000) === 0b11000000) { // 双字节字符，需至少1个续字节
    if (targetLength - index < 2) index--;
  } else if ((startByte & 0b11110000) === 0b11100000) { // 三字节字符，需至少2个续字节
    if (targetLength - index < 3) index--;
  } else if ((startByte & 0b11111000) === 0b11110000) { // 四字节字符，需至少3个续字节
    if (targetLength - index < 4) index--;
  }
  // 递归确保最终位置合法（避免极端边界情况）
  return index > 0 ? getValidTruncationIndex(bytes, index) : 0;
}

第二步：去掉末尾的残缺组合字符 #

Unicode里有些字符不能单独存在（比如肤色修饰符、ZWJ连接符），必须跟前面的字符绑定。截断后如果末尾是这类字符，直接删掉：

function removeTrailingCombiningChars(str) {
  // 匹配常见非独立组合字符：肤色修饰符、ZWJ连接符
  const combiningRegex = /[\u1F3FB-\u1F3FF\u200D]$/;
  while (combiningRegex.test(str)) {
    str = str.slice(0, -1);
  }
  return str;
}

完整的截断函数 #

把两步拼起来，就是最终可用的稳定函数：

function safeCutString(str, maxBytes) {
  const encoder = new TextEncoder('utf-8');
  const decoder = new TextDecoder('utf-8');
  const bytes = encoder.encode(str);
  
  if (bytes.length <= maxBytes) return str;
  
  // 第一步：找到合法的截断字节位置
  const validIndex = getValidTruncationIndex(bytes, maxBytes);
  const validBytes = bytes.slice(0, validIndex);
  
  // 第二步：解码后清理末尾的残缺组合字符
  let result = decoder.decode(validBytes);
  result = removeTrailingCombiningChars(result);
  
  return result;
}

测试验证 #

用你的案例测试效果：

console.log(safeCutString("abc✊🏼def", 5)); // 输出：abc（截断到5字节时卡在✊中间，回溯后只保留完整的abc）
console.log(safeCutString("abc✊🏼def", 6)); // 输出：abc（前6字节包含完整的✊，但后续🏼被截断，若需保留完整组合可扩展逻辑去掉✊）
console.log(safeCutString("ab✊🏼cdef", 6)); // 输出：ab（截断到6字节时卡在🏼的第一个字节，回溯后保留完整的ab）

额外说明 #

• 如果你的需求是「尽可能多保留字符，哪怕组合Emoji被拆」，可以去掉第二步的组合字符处理；如果要求「必须保留完整的语义单元」，可以扩展组合字符的检测逻辑（比如支持ZWJ连接的多Emoji组合、重音符号等）。
• Unicode会不断新增组合字符，记得定期更新正则里的字符范围。

内容的提问来源于stack exchange，提问作者Pudica