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

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.xdnf.cn/news/14249.html

相关文章:

  • 快速幂算法详解:从暴力到优雅的数学优化
  • Python脚本开发入门:从基础到进阶技巧
  • SpringBoot ​@ControllerAdvice 处理异常
  • 鸿蒙app 开发中 如何 看 app 页面的ui结构
  • JS 数组转Object和Map
  • PHP基础-运算符
  • 【62 Pandas+Pyecharts | 智联招聘大数据岗位数据分析可视化】
  • 如何VMware虚拟机扩容磁盘,有很详细图文
  • Blazor Web Assembly - 使用Power Automate Desktop来跟踪一下Blazor页面的内存使用情况
  • 动态规划:求最长回文子串
  • OpenMMlab导出MaskFormer/Mask2Former实例分割模型并用onnxruntime和tensorrt推理
  • DB2连接池监控与挂起连接释放指南
  • Win32OpenSSL工具下载地址
  • Electron截取响应体
  • @Validation 的自定义校验实现, Spring Boot 和 java
  • 实现网页中嵌入B站视频播放器:解决high_quality=1 失效的问题
  • struct stat结构体
  • NY230NY233美光固态闪存NY237NY246
  • 【Transformer拆解】-2. 位置编码(Positional Encoding)
  • 一个密码实现库crypto-work
  • Pandas数据工程深度解析
  • 四数之和-力扣
  • XSS (Reflected)-反射型XSS
  • 晶振常见封装工艺及其特点
  • 深入讲解 Ollama 的源码
  • 【Java多线程从青铜到王者】定时器的原理和实现(十一)
  • Spring依赖注入源码学习:基于XML配置的DI源码解析
  • PGCP:用于比较基因组学的植物基因组综合数据库-文献精读144
  • 信息学奥赛一本通 1543:【例 3】与众不同
  • ubuntu之坑(十四)——安装FFmpeg进行本地视频推流(在海思平台上运行)