别让字符方法再坑你！从非breaking空格到charCodeAt和codePointAt

上一篇mp.weixin.qq.com/s/7Abj0Rzqx…讲到一个“非breaking空格”的概念，这个是可以通过代码验证的。

具体如下代码所示：

 

javascript

体验AI代码助手

代码解读

复制代码

function identifyWhitespace(str) {
  const whitespaceMap = {
    'U+0020': '普通空格',
    'U+00A0': '非breaking空格',
    'U+3000': '全角空格',
    'U+0009': '制表符',
    // 可添加更多空白字符...
  };
  const result = [];
  for (let i = 0; i < str.length; i++) {
    const codePoint = str.codePointAt(i);
    const hexCode = `U+${codePoint.toString(16).toUpperCase().padStart(4, '0')}`;

    if (/\s/u.test(str[i])) {
      result.push({
        position: i,
        character: str[i],
        codePoint: hexCode,
        name: whitespaceMap[hexCode] || '未知空白字符'
      });
    }
  }
  return result;
}

需要注意的是，这里是通过codePointAt判断，而不是charCodeAt。

 

为什么需要关注编码方法？（精彩内容开始了）

在分析空白字符时，某些特殊空格（如蒙古文空白符 U+180E）可能属于非BMP平面，此时必须使用codePointAt才能正确识别其码点。

敲黑板来了。

这里简单理解两个概念：

BMP平面（Basic Multilingual Plane），就是基本多文种平面。

非BMP平面，则是辅助平面（Supplementary Planes）。

 

继续对比看看：charCodeAt vs codePointAt

特性	charCodeAt(index)	codePointAt(pos)
返回值范围	0–65535（16位UTF-16码元）	0–1114111（32位Unicode码点）
处理BMP字符	正确返回单个码元值（如 'A'→ 65）	同charCodeAt()（如 'A'→ 65）
处理非BMP字符	返回代理对的单独码元（如 '𠮷'→ 55362）	返回完整码点（如 '𠮷'→ 134071）
索引规则	基于UTF-16码元（可能拆分代理对）	基于UTF-16码元，但自动合并代理对
超出索引返回值	NaN	undefined
典型应用场景	ASCII字符处理、传统编码转换	Emoji、生僻字、需要完整Unicode支持的场景

再继续往下看看。

 

首先，

javascript字符串是基于UTF-16编码的。

详情：别让字符方法再坑你！从非breaking空格到charCodeAt和codePointAt