当前位置: 首页 > news >正文

js 查看字符串字节数

 今天遇到个需求,需要在后端编辑前端底部显示的文字,比如关于我们,和电话等。但是这些文字或数字有长度限制,太长就会导致页面变形。但是具体限制多大,得根据前端页面,还得看文字内容是什么。

汉字是 2 字节,数字和字母是 1 字节。大概占的大小也是 2 :1。

这就需要获取字符串字节数。

new Blob(["雨南"]).size

但这个获取的字节数是 3,因为 JavaScript 通常会使用UTF-8编码,这是一种多字节编码方式,其中英文字符通常占用1个字节,而中文字符可以占用3个字节或更多。

因为JavaScript原生并不支持GBK编码,所以可以用第三方库获取 gbk 编码字节。

npm install iconv-lite
function estimateObjectSize(obj) {let size = 0;for (const key in obj) {if (obj.hasOwnProperty(key)) {size += key.length * 2; // 属性名通常占用2字节的内存(假设为UTF-16编码)if (typeof obj[key] === 'string') {size += obj[key].length * 2; // 字符串占用2字节/字符(UTF-16编码)} else if (typeof obj[key] === 'number') {size += 8; // 数字通常占用8字节的内存(双精度浮点数)} else if (typeof obj[key] === 'object' && obj[key] !== null) {// 对于嵌套对象,这里可以递归调用estimateObjectSize或者简单地增加一个固定值来近似表示复杂对象的大小size += 4; // 示例:为嵌套对象增加4字节的内存占用(近似值)} else {// 其他类型可以根据需要添加大小估算逻辑}}}return size;
}const obj = { key: "value", number: 123 };
console.log(`估计对象大小(字节): ${estimateObjectSize(obj)}`);

 也可手动计算简单对象的大小(近似)

function estimateObjectSize(obj) {let size = 0;for (const key in obj) {if (obj.hasOwnProperty(key)) {size += key.length * 2; // 属性名通常占用2字节的内存(假设为UTF-16编码)if (typeof obj[key] === 'string') {size += obj[key].length * 2; // 字符串占用2字节/字符(UTF-16编码)} else if (typeof obj[key] === 'number') {size += 8; // 数字通常占用8字节的内存(双精度浮点数)} else if (typeof obj[key] === 'object' && obj[key] !== null) {// 对于嵌套对象,这里可以递归调用estimateObjectSize或者简单地增加一个固定值来近似表示复杂对象的大小size += 4; // 示例:为嵌套对象增加4字节的内存占用(近似值)} else {// 其他类型可以根据需要添加大小估算逻辑}}}return size;
}const obj = { key: "value", number: 123 };
console.log(`估计对象大小(字节): ${estimateObjectSize(obj)}`);

其实还有一个办法,不设置限制长度,超出长度时前端截断,这样用户就会知道超出长度了。 

http://www.dtcms.com/a/248971.html

相关文章:

  • FreeSurfer的脑区表面重建与注意力nii图结合
  • Java面试题021:一文深入了解微服务之网关Zuul
  • 缓存击穿,缓存穿透,缓存雪崩的原因和解决方案
  • 传智健康---十天项目总结
  • 挑战杯三个项目
  • 09 - TripletAttention模块
  • RAG数据集综述
  • 第六章 进阶19 琦琦的追求
  • Windows 文件复制利器:ROBOCOPY 拷贝命令指南
  • 全球域名WHOIS信息查询免费API接口教程
  • Tlias-web 管理系统项目知识点复盘总结
  • 高性能Tick级别高频交易引擎设计与实现
  • 6月13日day52打卡
  • 西电新增信息力学与感知学院,26考研正式招生
  • 【python深度学习】DAY 52 神经网络调参
  • 第三章支线八 ·构建之巅 · 工具链与打包炼金术
  • PHP商城源码:构建高效电商平台的利器
  • DeepSeek 引领前端开发变革:AI 助力学习与工作新路径
  • record类型-Java 16
  • 使用 PolarProxy+Proxifier 解密 TLS 流量
  • Stone 3D使用RemoteMesh组件极大的缩小工程文件尺寸
  • python实现鸟类识别系统实现方案
  • C++中 using 命名别名和命名别名模板的用法
  • 提升搜索可见度的基石:标题标签设置原则与SEO效能量化分析
  • 服务自动添加实例工具
  • 中国温室气体排放因子数据库
  • 高低温介电温谱测量系统在实际应用中有哪些具体的挑战?
  • java将pdf文件转换为图片工具类
  • 第六天 界面操作及美化(6.1 建立菜单及异步调用)
  • 纪念2024.10-2025.6飞牛os的6次系统崩溃