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

51 阅读2分钟

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

具体如下代码所示:

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码元,但自动合并代理对
超出索引返回值NaNundefined
典型应用场景ASCII字符处理、传统编码转换Emoji、生僻字、需要完整Unicode支持的场景

再继续往下看看。

首先,

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


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