codePointAt()与charCodeAt()方法区别

charCodeAt与codePointAt的用法:

  • 相同点:
      charCodeAt与codePointAt都是字符串实例上的方法,用途都是用来返回指定索引位字符的Unicode编码。
  • 不同点:
       charCodeAt与codePointAt匹配索引位的规则不一样。charCodeAt是根据码元来匹配,codePointAt是根据码点来进行匹配的。

JavaScript 内部,字符以 UTF-16(字符用两个字节或四个字节表示) 的格式储存,码点范围介于U+0000到U+FFFF,每个字符固定为2个字节,一个码元。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符),两个码元,JavaScript 会认为它们是两个字符。

在计算机发展的早期,由于存储空间宝贵,Unicode使用16位二进制来存储文字。也就是一个码元来存储一个文字。
由于技术的发展,Unicode对文字编码进行了扩展,将某些文字扩展到了32位(占用两个码元),而一个文字对应的二进制数字是一个码点,所以使用32位二进制数字存储的文字(一个码点=两个码元)
特别要注意,码点可以是一个码元,也可以是两个码元。

字符串的length属性返回的是码元。所以在对一些字符串如果要处理长度的时候要注意这一点。

let str="A";              
let strSpecial = "𠮷"; 
console.log(str.length);               // 1
console.log(strSpecial.length);       // 2

(1)length属性返回对应几个码元字符
(2)str的Unicode是\u0041\只有一个字符,strSpecial Unicode编码是\ud842\udfb7,双字节两个码元,js识别为2个字符

let str="A";
let strSpecial = "𠮷"; 
console.log(str.charCodeAt(0));               // 65
console.log(str.codePointAt(0));              // 65
console.log(strSpecial.charCodeAt(0));        // 55362
console.log(strSpecial.codePointAt(0));       // 134071

ES6 提供了codePointAt(0)方法,能够正确处理 4 个字节储存的字符,根据字符串码元的位置得到其码点。

  • 𠮷这个字的Unicode编码是\ud842\udfb7,占用了两个码元。
  • 所以当用charCodeAt(0)是匹配0位的码元,前两个字节值 55362,toString(16)是ud842。
  • 当用codePointAt(0)是匹配0位的码点,codePointAt能识别出字符串的码点,所以反回134071。

codePointAt方法返回的是码点的十进制值,如果想要十六进制的值,可以使用toString方法转换一下。

let a = 'A';
 let s = '𠮷';
 a.codePointAt(0).toString(16) 
"41"
 s.codePointAt(0).toString(16) 
"20bb7"

但是这里需要注意参数:

let strSpecial = "𠮷"; 
console.log(strSpecial.charCodeAt(1));           
console.log(strSpecial.codePointAt(0));    
console.log(strSpecial.codePointAt(1));
image.png

codePointAt(1)与charCodeAt(1)的返回值相同,都是返回后两个字节的码元值。
这是因为索引位是根据码元,而匹配的规则是根据码点的规则。如果后面两位码元是一个码点,就会当作一个码点来处理。

let str="A";
let strSpecial = "𠮷A"; 
console.log(str.charCodeAt(0));
console.log(strSpecial.codePointAt(0));
console.log(strSpecial.codePointAt(1));
console.log(strSpecial.codePointAt(2));
image.png

strSpecial.codePointAt(1)取的不是A的字符值,是strSpecial后两个字节的码元值,而.codePointAt(2)才取得A的字符值,与str.charCodeAt(0)一样。

解决顺序问题的配套办法是使用for...of循环,因为它可以识别UTF-32(字符用四个字节表示,两个码元)

let strSpecial = "𠮷"; 
for (let char of strSpecial) {
  console.log(char.codePointAt(0));
}

关于for of可以参阅JavaScript for of 循环一章节。
codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  // 如果码点大于了16位二进制的最大值,则其是32位的
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit("𠮷") // true
is32Bit("a") // false

有用的字符编码笔记:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html

欢迎大佬指点

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的...
    卞卞村长L阅读 747评论 0 0
  • ES6学习笔记-字符串与正则表达式 JS字符串编码 在ES6之前,JS的字符串以16位字符编码(UCS-2)为基础...
    小线亮亮阅读 641评论 0 0
  • 之前突然发现自己对字符编码还是一知半解,基本上只是听说过各种编码的名字,对它们之间的特点和区别还是不甚了解。所以这...
    L_Zephyr阅读 1,888评论 0 4
  • 白露已过,秋分已到来。 又到一年中秋节, 却怎么也快乐不起来; 数一数你已远去415日, 你在那边还好吗? 天凉了...
    淡淡的云_f0fd阅读 1,351评论 16 6
  • """------ author == 李 墨 ------""" 1 声明一个字典保存一个学生的信息,学生...
    snow_5ca2阅读 233评论 0 0