Javascript中string怎么这么多坑

为什么"😀".length === 2

核心原因:UTF-16 代理对(Surrogate Pairs)

JavaScript 采用 UTF-16 编码 存储字符串:

  • 基本多文种平面(BMP) :U+0000 到 U+FFFF(占绝大多数常用字符)
  • 补充平面(Supplementary Planes) :U+10000 到 U+10FFFF(需要 2 个代码单元表示)

示例:

javascript 复制代码
const emoji = '😀'; // U+1F600
console.log(emoji.length); // 2

编码机制详解

1. 代理对工作原理
javascript 复制代码
// 数学公式计算
const codePoint = 0x1F600;        // 目标码点
const high = Math.floor((codePoint - 0x10000) / 0x400) + 0xD800;  // 高位代理
const low = (codePoint - 0x10000) % 0x400 + 0xDC00;              // 低位代理

console.log(high.toString(16)); // d83d(高位代理)
console.log(low.toString(16));  // de00(低位代理)
2. 内存存储结构
字符 UTF-16 代码单元 内存表示(十六进制)
😀 \uD83D\uDE00 D8 3D DE 00

常见场景示例

场景 1:表情符号
javascript 复制代码
'😂'.length;          // 2(U+1F602)
'👨👩👧👦'.length;    // 8(包含多个代理对)
场景 2:罕见汉字
javascript 复制代码
'𠮷'.length;          // 2(U+20BB7,日本汉字)
'你'.length;          // 2(U+2F804,CJK扩展B汉字)
场景 3:数学符号
javascript 复制代码
'𝌆'.length;          // 2(U+1D306,易经符号)
'𞸀'.length;          // 2(U+1EE00,阿拉伯数学符号)

正确获取字符数量的方法

方法 1:使用迭代器
javascript 复制代码
const str = '😀a';
console.log([...str].length);    // 2(正确)
console.log(Array.from(str).length); // 2
方法 2:码点计数
javascript 复制代码
function countCodePoints(str) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    const code = str.codePointAt(i);
    if (code > 0xFFFF) i++; // 跳过低位代理
    count++;
  }
  return count;
}

console.log(countCodePoints('😀ab')); // 3

常见陷阱与解决方案

陷阱 1:字符串反转破坏代理对
javascript 复制代码
// 错误方式
'🚀abc'.split('').reverse().join(''); // 'cba��'

// 正确方式
function reverseString(str) {
  return [...str].reverse().join('');
}
reverseString('🚀abc'); // 'cba🚀'
陷阱 2:字符截取不完整
javascript 复制代码
// 错误截取
'👨👩👧👦'.substring(0, 3); // '👨�'

// 正确截取
function safeSubstring(str, start, end) {
  return [...str].slice(start, end).join('');
}
safeSubstring('👨👩👧👦', 0, 2); // '👨👩'

编码检测工具

1. 查看字符的码点
javascript 复制代码
'😀'.codePointAt(0).toString(16); // '1f600'
2. 检测是否代理对
javascript 复制代码
function isSurrogatePair(str, index) {
  const code = str.charCodeAt(index);
  return code >= 0xD800 && code <= 0xDBFF;
}

isSurrogatePair('😀', 0); // true

关键结论

特性 说明
length 属性本质 反映 UTF-16 代码单元数量,不是实际字符数
代理对字符特征 Unicode 码点 > 0xFFFF 的字符需要 2 个代码单元
正确操作方法 使用 [...str]codePointAt()fromCodePoint() 等现代 API
性能影响 代理对处理会增加计算复杂度,需注意大文本操作的性能
相关推荐
南屿欣风8 分钟前
解决 Gin Web 应用中 Air 热部署无效的问题
前端·gin
猿大师办公助手11 分钟前
Web网页内嵌福昕OFD版式办公套件实现在线预览编辑PDF、OFD文档
前端·pdf·word
幼儿园技术家1 小时前
什么是RESTful 或 GraphQL?
前端
echola_mendes2 小时前
LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”
服务器·前端·数据库·ai·langchain
拉不动的猪2 小时前
刷刷题46(常见的三种js继承类型及其优缺点)
前端·javascript·面试
关注我:程序猿之塞伯坦2 小时前
JavaScript 性能优化实战:突破瓶颈,打造极致 Web 体验
开发语言·前端·javascript
兰德里的折磨5502 小时前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui
hikktn2 小时前
【开源宝藏】30天学会CSS - DAY9 第九课 牛顿摆动量守恒动画
前端·css·开源
申朝先生3 小时前
面试的时候问到了HTML5的新特性有哪些
前端·信息可视化·html5
在下千玦3 小时前
#前端js发异步请求的几种方式
开发语言·前端·javascript