浏览器环境下JavaScript如何获取数字与字符串的实际字节大小

数字类型字节计算 #

JavaScript 原始Number类型统一遵循IEEE 754双精度浮点数规范，标准定义下固定占用8字节（64位），无需额外计算。如果需要获取TypedArray场景下不同数值类型的字节占用，可通过类型映射直接判断：

// 原始Number标准字节大小
const STANDARD_NUMBER_SIZE = 8;

/**
 * 计算不同数值类型的字节占用
 * @param {number|bigint} num 待计算数值
 * @param {string} [type='Float64'] 数值存储类型，对应TypedArray类型
 * @returns {number} 字节大小
 */
function getNumberByteSize(num, type = 'Float64') {
  const typeSizeMap = {
    Int8: 1,
    Uint8: 1,
    Int16: 2,
    Uint16: 2,
    Int32: 4,
    Uint32: 4,
    Float32: 4,
    Float64: 8,
    BigInt64: 8,
    BigUint64: 8
  };
  return typeSizeMap[type] ?? STANDARD_NUMBER_SIZE;
}

字符串类型字节计算 #

字符串字节大小需要先明确对应编码规则，浏览器环境下可通过原生TextEncoderAPI实现不同编码的字节计算，不需要依赖Node专属的BufferAPI，也不会出现Blob默认编码不符合预期的问题。

• UTF-16编码（JS标准定义的字符串存储编码）：ECMAScript标准中字符串由UTF-16码元构成，BMP平面字符占1个码元（2字节），辅助平面字符（如emoji、生僻字）占2个码元（4字节）。字符串length属性返回值即为UTF-16码元总数，可直接计算，也可通过TextEncoder验证：

/**
 * 计算字符串UTF-16编码下的字节大小
 * @param {string} str 待计算字符串
 * @returns {number} 字节大小
 */
function getStringUtf16Size(str) {
  // 性能最优写法，结果和API计算完全一致
  return str.length * 2;
  // 验证写法：Chrome等现代浏览器均支持
  // return new TextEncoder('utf-16le').encode(str).byteLength;
}

• UTF-8编码：new Blob([str]).size返回的就是UTF-8编码下的字节大小，用TextEncoder实现性能更优，不需要额外创建Blob对象：

/**
 * 计算字符串UTF-8编码下的字节大小
 * @param {string} str 待计算字符串
 * @returns {number} 字节大小
 */
function getStringUtf8Size(str) {
  return new TextEncoder().encode(str).byteLength;
}

注意：以上返回的是ECMAScript标准定义下的编码字节大小。Chrome使用的V8引擎会做内部存储优化，例如纯ASCII字符串会用1字节/字符的Latin1格式存储节省内存，引擎内部的实际内存占用无公开API可以直接获取。

测试示例 #

const testNum = 999;
console.log(getNumberByteSize(testNum)); // 8

const testStr = '测试a😀';
console.log(getStringUtf16Size(testStr)); // 10：共5个UTF-16码元，5*2=10
console.log(getStringUtf8Size(testStr)); // 10：汉字各3字节、a占1字节、emoji占4字节，合计10

内容的提问来源于stack exchange，提问作者Joji