代码之家 › 专栏 › 技术社区 › Vishal

JavaScript中字符串的字节大小

utf-16 utf-8 javascript

Vishal · 技术社区 · 2 年前

我正在努力理解Strings&数组。根据这个有用的问题: How many bytes in a JavaScript string?

Blob 是一种检查字符串字节大小的好方法: new Blob(['a']).size -> 1 字节

但是字符串是编码的 UTF-16 使用的JavaScript 2 bytes .如何 Blob 返回1?

此外-----

const x = 200;
const y = 200;

const changes = []

for (let i=0;i<y;i++) {
    let subArr = []
    for (let j=0;j<x;j++) {
        subArr[j]= new Uint8Array(1)
    }
    changes[i]=subArr
}
console.log(new Blob(changes).size)

上面的数组消耗 79800 而不是 40000 (Uint8Array(1)的200*200)。

为什么上面的数组消耗了我预期(40000)的两倍(79800)? 此外,为什么第一个索引(0)被解释为1个字节,而下面的索引是2个字节?为什么?

for (let i=0;i<y;i++) {
   changes[i] = new Array(x).fill(new Uint8Array(1))
}

如果我使用上面的方法填充数组,它仍然会消耗 79800 。为什么?正如评论中所指出的 Uint8Array 被填充的对象 x 时间。

2 回复 | 直到 2 年前

Sergiu Paraschiv 2 年前

Blob 使用UTF-8表示字符串。 UTF-8的最小字节大小为1和字符 'a' 可以使用单个字节以UTF-8表示。两字节UTF-8字符( 'Ð' 例如)返回2,还有一些更长的东西,比如复杂的表情符号( 'ð' )返回4。

关于79800与40000字节的示例:您没有构建一个40000字节的数组并将其传递给 Blob 。您正在构建一个字节数组数组。这些数组的“叶子”节点实际上是40000字节,但这不是构建Blob所用的。。。

文档有点模糊,但在您做了一些实验后会有所帮助。

“blob的内容由参数数组中给定值的串联组成。”

值的串联 。这是什么意思?连接是对数组的一种操作,术语主要用于表示“连接两个字符串”。好吧,让我们做一些实验:

await new Blob('a').text() 解析为 “a” , await new Blob([new Uint8Array(1)]).text() 解析为 '\x00' , await new Blob([[new Uint8Array(1)]]).text() ,更接近您的示例,解析为 '0' 。嗯。。。这很有道理,因为 new Uint8Array(1).toString() 是 “0” 也

await new Blob([[new Uint8Array(1),new Uint8Array(1)]]).text() 解析为 '0,0' ,这也是有道理的,因为 [new Uint8Array(1),new Uint8Array(1)].toString() 是 '0,0' 也

最后一个是基本的解释。当你通过的东西不是 字符串 到 Blob 它会自动将它们转换为字符串“for you”。

转换为字符串的数组占用的不仅仅是其元素的字符串表示,因为我们还在它们之间使用逗号。

再次回到您的示例,您正在传递200个数组 Uint8Array(1) 实例到 Blob 。每个“内部”数组都变成一个String,这意味着它是200 “0” 字符加199 ',' 字符。而(200+199)*200,你猜对了,是79800!

这里的主要教训是:无论你传递给什么 Blob 首先是“strigified”。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前