在 JavaScript 中，字符串长度的计算方式有很多种。其中一种常见的方式是通过字符数来计算字符串长度，但实际上，JavaScript 中的字符串长度是根据其占用的字节数来计算的。这个细节可能会影响到一些涉及到字符编码和网络传输的前端开发工作。
字符串长度与字节的关系
JavaScript 中的字符串是以 UTF-16 编码保存的，每个字符都使用 16 位（即两个字节）表示。因此，一个字符串的长度等于其所包含的字符数乘以 2。
例如，以下代码定义了一个字符串“你好”，使用 .length 属性获取长度，可以得到结果为 4：
const str = '你好'; console.log(str.length); // 输出 4
这是因为 "你" 和 "好" 各自占用两个字节，总计 4 个字节。
如果字符串中包含非 ASCII 字符，那么每个字符就需要占用更多的字节。例如，以下代码将一个包含 Emoji 表情的字符串进行了长度计算：
const str = '👋 Hello, World!'; console.log(str.length); // 输出 16
虽然该字符串只包含 14 个字符，但其长度为 16，是因为 Emoji 表情在 UTF-16 编码下需要占用 4 个字节。
处理字符串长度的技巧
当需要限制字符串长度时，通常会采用一些技巧来确保计算的准确性。
使用 TextEncoder API
如果需要精确地知道一个字符串占用了多少字节，可以使用 JavaScript 中的 TextEncoder API 将其编码为指定格式（例如 UTF-8）的字节数组，然后获取数组的长度即可。
以下是一个使用 TextEncoder API 计算字符串长度的示例：
const str = '你好'; const encoder = new TextEncoder(); const bytes = encoder.encode(str); console.log(bytes.length); // 输出 6
这里首先创建了一个 TextEncoder 实例，并将原始字符串 str 作为参数传入 encode() 方法中。然后获取返回的字节数组 bytes 的长度，即可得到字符串的实际字节数。
截断字符串
另一种处理字符串长度的方法是截断字符串。在这种情况下，需要注意不能简单地通过截取字符串前若干个字符来限制其长度，而应该考虑每个字符占用的字节数。
以下是一个截断字符串的示例，它将一个字符串限制在指定的字节数以内：
-- -------------------- ---- -------
-- ---------------
-------- ------------------- ----------- -
----- ------- - --- --------------
----- ----- - --------------------
-- ------------- -- ----------- -
------ ----
-
--- ------------ - ---
--- ---- - - -- - - ----------- ---- -
----- --------- - ------------------------------
-- ------------------ - - --------- - ----------- -
------
-
------------ -- -------
-
------ -------------
-
-- ---------- -- -----
----- --- - ------------
------------------------------- ----- -- -- ------这里定义了一个 truncateString() 函数，它接受两个参数：原始字符串和需要限制的字节数。首先使用 TextEncoder API 将字符串编码为字节数组，并计算其长度。如果字符串已经不超过指定字节数，则直接返回该字符串；否则从前往后遍历字符串，逐个字符计算其占用的字节数，直到达到指定的字节数为止。
总结
JavaScript 中的字符串长度
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12980