码元和码点

简介: 在计算机中,字符存储依赖于其ASCII编码值。JS中,每个字符占用16位(2字节)的空间,称为码元,范围0-65535。当字符所需空间超限时,JS使用两个码元表示,总称码点。处理特殊字符如表情时,需自定义方法以正确识别码点,避免乱码,确保字符串操作准确无误。

码元和码点

1.介绍码元和码点

​ 在计算机中存储字符不是存储一个真正的字符,而是存储这个字符对应的ascll编码值。在js中,一个字符占16位空间也就是2个字节,而这个空间就称之为码元,一个码元的存储空间是0-2的16次方,也就是65535,而在现实生活中我们的文字绝不只这点于是想要存储一个字符所占空间大于65535的话,js就会开两个空间给这个字符,而这个字符所占的全部空间就称之为码点。

2.码元码点的实际用途

在js中,我们通过字符串的length属性实际上是在访问这个字符串所占的码元。

const string = "😭🦐"
console.log(string.length); // 4

所以在开发中我们遇到表情这种占两个码元的字符时,处理起来会有点问题,如:

const string = "😭🦐"
console.log(string.slice(0,1)) // 输出乱码

因为slice方法实际上也是根据字符的码元进行截取,而字符串里的一个字符是占两个码元的所以当我们想截取第一个字符的时候只截取到了他第一个码元,还有一个码元没有截取到,所以会导致乱码。

解决办法就是在字符串原型上添加几个专门处理表情等字符的方法。

一,方法一

​ 在字符串原型上添加pointLength方法,用于获取字符串的码点数量

String.prototype.pointLength = function () {
   
  let len = 0;
  for (let i = 0; i < this.length; ) {
   
    len++;
    const t = this.codePointAt(i);
    i += t > 0xffff ? 2 : 1;
  }
  return len;
};

二,方法二

​ 在字符串原型上添加pointAt方法,用于获取字符串中指定码点索引的字符。

String.prototype.pointAt = function (index) {
   
  let currentIndex = 0;
  for (let i = 0; i < this.length; ) {
   
    if (currentIndex === index) {
   
      const code = this.codePointAt(i);
      return String.fromCodePoint(code);
    }
    currentIndex++;
    const point = this.codePointAt(i);
    i += point > 0xffff ? 2 : 1;
  }
};

三,方法三

​ 在字符串原型上添加pointSlice方法,用于截取指定码点索引的字符。

String.prototype.pointSlice = function (start, end) {
   
  let result = "";

  for (let i = start; i < this.pointLength() && i < end; i++) {
   
    result += this.pointAt(i);
  }
  return result;
};

添加完这三个方法后,以后处理这种表情字符串就容易多了。

const a = "🦐😭😠🏃";

console.log(a.pointLength()); // 4
console.log(a.pointAt(1)); // 🦐
console.log(a.pointSlice(2, 3)); // 😠

3.结语

码元与码点的问题主要会出现在一些偏僻子,表情等字符中,因为这些字符的存储空间超过了2个字节也就是超过了一个码元,所以在进行字符串处理的过程中会出现乱码的问题,通过添加三个处理码元码点的方法,就可以很好的解决这个问题。

目录
相关文章
|
10月前
|
测试技术 持续交付 API
探索软件测试中的自动化:从新手到专家
在软件开发的世界中,测试是确保产品质量的关键步骤。本文将通过一个初学者的视角,介绍如何从零开始构建自动化测试框架,并逐步深入到更复杂的测试场景。我们将探讨自动化测试的优势、工具选择、以及如何有效地实施和扩展自动化测试策略。无论你是刚入门的软件测试新手,还是希望提升自动化测试技能的开发人员,这篇文章都将为你提供实用的指导和启示。
|
7月前
|
机器学习/深度学习 自然语言处理 算法
《深度解析:批量、随机和小批量梯度下降的区别与应用》
梯度下降算法是优化模型参数的核心工具,包括批量梯度下降(BGD)、随机梯度下降(SGD)和小批量梯度下降(MBGD)。BGD使用全部数据计算梯度,收敛稳定但计算量大;SGD每次仅用一个样本,更新快但波动大;MBGD则取两者折中,使用小批量样本,兼具稳定性和效率。选择合适的变体需考虑数据规模、计算资源及精度要求。
337 1
|
存储 传感器 人工智能
AliOS Things 系统架构介绍(一)
AliOS Things 系统架构介绍(一)
645 0
|
10月前
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文作者是一位自学前端两年半的大一学生,分享了在Spring Boot项目中使用Knife4j遇到的问题及解决方案,包括解决Swagger请求404错误、JS错误等,详细介绍了依赖升级、注解替换及配置修改的方法。
2022 1
|
9月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
631 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
9月前
|
编解码 监控 安全
远程软件怎么选?ToDesk、向日葵、Parsecd、TeamViewer评测结果公布
在全球化和数字化转型加速的背景下,选择一款高效稳定的远程控制软件成为许多个人用户和企业的核心需求。本文将对比四款热门远程控制软件——向日葵、ToDesk、Parsecd和TeamViewer,从连接速度、功能丰富度、安全性和易用性等多个维度进行评测。
1668 6
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1164 0
|
10月前
|
Go
go语言中控制循环
go语言中控制循环
105 14
|
11月前
|
缓存 API UED
通过渐进式Web应用(PWA)提升用户体验
【10月更文挑战第15天】渐进式Web应用(PWA)结合了传统Web应用和移动应用的优点,提供更快、更可靠和更吸引人的用户体验。本文介绍PWA的核心特性、优势及构建方法,包括服务工作线程、响应式设计和现代Web API的应用,帮助开发者提升用户体验。
|
Ubuntu 安全 程序员
一文带你了解软件版本号
【9月更文挑战第3天】
2745 12
一文带你了解软件版本号

热门文章

最新文章