JavaScript中获取字符串长度最直接的方法是使用 .length 属性，但面对中文字符、表情符号等由多个码元组成的字符时，需要结合扩展方法才能准确计算用户感知的字符数。
js字符长度方法：从基础到进阶
获取字符串长度的基础方法： .length
在JavaScript中，每个字符串都带有一个.length属性，它返回的是字符串中UTF-16码元的数量，对于大部分英文字母和数字,这个值与实际字符数一致。
"hello".length; // 5 "abc123".length; // 6
但如果你处理的是中文字符，情况就不同了，中文字符在UTF-16中通常占用两个码元，所以.length会返回2,而不是1。
"中文".length; // 2（每个字占2个码元） "😊".length; // 2（表情符号也占2个码元）
这就是为什么在很多表单验证或字数统计场景中，直接使用.length会得到“错误”的结果，业内专家指出，在Web开发中，约有相当一部分的字符长度问题都源于对UTF-16编码的误解。
中文字符串长度计算场景：为什么 .length 会“出错”？
JavaScript内部使用UTF-16编码，基本多文种平面（BMP）内的字符用一个码元表示，超出BMP的字符（如大多数字符、部分生僻字、表情符号）用两个码元（即代理对）表示。.length统计的是码元数,而非用户直观看到的字符数。
假设你做一个微博发帖功能，限制140个字符，如果用户输入的是中文，.length会按两个码元算一个字符，导致实际能输入的字数比预期少一半，这就是典型的中文字符串长度计算场景,需要特殊处理。
获取字符串长度方法有哪些？常见方法对比
要解决上述问题，你需要使用能够识别完整字符的方法,以下是几种常见且有效的方案：
使用 for…of 循环手动计算
for...of循环会按字符串的迭代器遍历，每次迭代返回一个完整的字符（码点）,你可以用它来统计真实字符数：
function realLength(str) {
let count = 0;
for (let char of str) {
count++;
}
return count;
}
realLength("中文"); // 2
realLength("😊"); // 1
这种方法直观且兼容性好,但需要手动封装函数。
通过 Array.from 或扩展运算符
Array.from()和扩展运算符都能将字符串转换为数组，每个元素对应一个完整字符,然后取数组长度即可：
Array.from("中文").length; // 2
[... "😊"].length; // 1
这是目前最简洁的写法之一，适合现代浏览器和Node.js环境。
利用正则表达式匹配码点
使用正则匹配所有非代理对字符,也能统计真实个数：
"中文".match(/[sS]/gu).length; // 2
u标志启用Unicode模式，使正则能正确处理代理对，这种方法性能略低于前两种,但可与其他正则操作结合使用。
Intl.Segmenter API（现代方案）
Intl.Segmenter是ECMAScript国际化API的一部分，专为语言敏感的文本分割设计，它可以按字符（grapheme）分割：
const segmenter = new Intl.Segmenter("zh", { granularity: "grapheme" });
[...segmenter.segment("😊")].length; // 1
这种方法能准确处理各种复合字符（如带变音符号的字母、国旗序列等），但浏览器兼容性仍在提升中，多数情况下仅推荐用于现代应用。
js字符长度方法性能对比：哪种方法最快？
不同方法在性能上有差异，尤其是在处理长字符串时，以下是一个简单的对比表格（基于V8引擎的常见表现）：
| 方法 | 速度（相对） | 兼容性 | 适用场景 |
|---|---|---|---|
| .length（原生） | 最快 | 所有环境 | 仅统计码元数，不用于真实字符 |
| for…of 循环 | 中等 | ES6+ | 需要兼容旧环境 |
| Array.from / 扩展 | 较快 | ES6+ | 现代项目首选 |
| 正则匹配（/gu） | 较慢 | ES5+（需u标志） | 与正则提取结合使用 |
| Intl.Segmenter | 通常较慢 | 较新环境 | 需要精确处理复杂字符 |
统计显示，在大多数实际项目中，超过90%的字符长度计算场景使用Array.from或扩展运算符就足够了，如果你需要兼容IE等旧浏览器，for...of配合polyfill是稳妥的选择。
实际项目中如何选择字符串长度计算方法？
每个项目的情况不同,选择方法时建议考虑以下因素：
- 文本来源：如果用户输入主要是英文和数字，
.length可能已经足够，但涉及中文、日文、韩文或表情符号时,必须使用基于字符的方法。 - 性能要求：对长度超过10万字符的字符串，
for...of循环可能比Array.from更稳定,因为后者需要一次性构建数组。 - 兼容性需求：如果项目需要支持IE11，
for...of配合Symbol.iteratorpolyfill是安全的。Array.from在IE中不支持,需要polyfill。 - 精确度要求：如果需要处理“👨👩👧👦”这种由多个码点组合成的家庭表情符号，只有
Intl.Segmenter能正确识别为1个字符,其他方法会将其中每个码点分开计数。
在团队协作中，获取字符串长度方法有哪些常常成为新手疑问,建议在项目初期就统一封装一个工具函数，
function charCount(str) {
return Array.from(str).length;
}
这样所有开发者都使用同一个方法，避免因.length误用导致的bug。
常见问题：js字符长度方法_获取字符串长度Q&A
Q：为什么 .length 对中文字符返回2，而对英文字符返回1？
A：因为JavaScript使用UTF-16编码，中文字符在BMP之外，需要两个码元表示。.length计算的是码元数，而非字符数，要获取用户看到的字符数，需使用Array.from等方法。
Q：在表单验证中，如何限制用户输入的最大字符数？
A：如果限制的是真实字符数（如“最多输入50个汉字”），应当使用字符识别方法，用Array.from(inputValue).length > 50来判断，如果限制的是字节数（如数据库字段长度），则需计算字节长度，可以使用encodeURIComponent方法。
Q：有没有一种方法可以同时兼容所有环境和所有字符类型？
A：目前没有100%全覆盖的方法。Array.from在大部分现代浏览器和Node.js中表现良好，兼容性也较好，对于极少数复杂组合字符（如带修饰符的emoji），Intl.Segmenter是最准确的，但需要较新环境，如果必须兼容老旧浏览器，建议使用for...of并配合相应的polyfill,同时接受对多种符号的计数误差。
在JavaScript中准确获取字符串长度不算复杂，关键是理解UTF-16编码机制，基础场景用.length，真实字符计数优先选Array.from，复杂字符场景考虑Intl.Segmenter，选择合适的方法,你的字符统计就不会再出现偏差。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/537833.html
