npm包 `truncate-utf8-bytes` 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要处理字符串的长度限制，例如在页面上显示标题或者摘要时。然而，由于不同字符的编码长度不同，因此简单地使用 String.slice() 或 substring() 方法来截断字符串可能会导致编码错误，特别是当处理 UTF-8 编码的多字节字符时。这时候，一个名为 truncate-utf8-bytes 的 NPM 包可以提供一种可行的解决方案。

简介

truncate-utf8-bytes 是一个 Node.js 模块，旨在提供一种在保留完整字符情况下截断 UTF-8 字符串的方法。该模块基于 UTF-8 Encoding 的规则实现，能够确保截断后的字符串仍然是有效的 UTF-8 字符串。其 API 设计也非常简单，只有一个函数：

function truncateUtf8Bytes(str, length)

其中，str 是待截断的字符串，length 是期望的字节数。该函数将返回一个新的字符串，它最多包含 length 个字节，并且在截断位置处不会打断任何字符。

安装

你可以通过 NPM 来安装 truncate-utf8-bytes：

npm install truncate-utf8-bytes

接下来，你可以在你的项目中导入该模块，并使用它提供的 API：

const truncateUtf8Bytes = require('truncate-utf8-bytes');

const str = '这是一个测试字符串';
const truncatedStr = truncateUtf8Bytes(str, 10);

console.log(truncatedStr);  // 输出："这是一"

深入理解

在 UTF-8 编码中，每个字符代表了一个或多个字节。如果我们直接对一个 UTF-8 字符串进行字节数截断，可能会使得某些字符被截断成了一部分。例如，下面的代码尝试将一个包含中文和英文的字符串截断为最多 5 个字节：

const str = 'Hello，中文！';
const truncatedStr = str.slice(0, 5);
console.log(truncatedStr);  // 输出："Hello�"

显然，由于中文字符占用了多个字节，因此截断操作破坏了字符串的完整性。而且，slice() 方法还不会检查截断位置是否刚好在一个字符的边界上。

相比之下，truncate-utf8-bytes 是一种更智能的截断方法。其内部实现了以下算法：

遍历字符串中的每个字符，计算其编码长度，并累加到一个总字节数变量 byteCount 中。
如果 byteCount 小于等于 length，则返回原字符串；
否则，从字符串的开头开始遍历每个字符，减去其编码长度，并将其添加到一个新的字符串中。直到 byteCount 小于等于 length。
对于最后一个字符，在被添加到新的字符串之前，先判断它是否完整（即其字节数是否等于截断前的字符串长度）。如果是，则直接添加到新字符串中；否则，丢弃该字符并返回新字符串。

这种算法确保了截断结果始终是有效的 UTF-8 字符串，而且不会破坏任何字符。同时，由于其对每个字符进行了精确计算，因此能够处理各种奇怪的字符，例如 emoji 表情符号、零宽度空格等等。

总结

truncate-utf8-bytes 是一个非常实用的 NPM 包，

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/51723