Cálculo del tamaño en bytes de una cadena

Introducción

En este laboratorio, exploraremos cómo calcular el tamaño en bytes de una cadena de texto utilizando JavaScript. Comprender el tamaño en bytes de las cadenas es esencial cuando se trabaja con transferencia de datos, cálculos de almacenamiento o limitaciones de API donde el tamaño de los datos es importante.

Aprenderemos cómo convertir una cadena en un objeto Blob y utilizar sus propiedades para determinar el tamaño exacto en bytes. Esta técnica se utiliza comúnmente en el desarrollo web cuando se trata de cargas de archivos, solicitudes de red o optimización del almacenamiento de datos.

Skills Graph

Comprender la representación de cadenas en JavaScript

Antes de calcular el tamaño en bytes de las cadenas, es importante entender cómo se representan las cadenas en JavaScript.

En JavaScript, las cadenas son secuencias de unidades de código UTF-16. Esto significa que caracteres como emojis o ciertos símbolos pueden ocupar más de un byte para representarse. Por ejemplo, una simple letra inglesa ocupa 1 byte, pero un emoji puede ocupar 4 bytes.

Comencemos lanzando Node.js en la terminal:

1. Abra la Terminal haciendo clic en el icono de la terminal en la interfaz de WebIDE.
2. Escriba el siguiente comando y presione Enter:

node

Ahora debería estar en la consola interactiva de Node.js, que se ve algo así:

Welcome to Node.js v14.x.x.
Type ".help" for more information.
>

En esta consola, podemos experimentar directamente con código JavaScript. Intente escribir el siguiente comando para ver la longitud de una cadena:

"Hello World".length;

Debería ver la salida:

11

Esto nos da la cantidad de caracteres, pero no el tamaño real en bytes. La cantidad de caracteres y el tamaño en bytes pueden ser diferentes, especialmente con caracteres especiales. Exploremos esto más a fondo en el siguiente paso.

Usar Blob para calcular el tamaño en bytes de una cadena

Ahora que entendemos la representación de cadenas, aprendamos cómo calcular el tamaño real en bytes de una cadena utilizando el objeto Blob.

Un Blob (Objeto Binario Grande) representa un objeto similar a un archivo de datos sin procesar e inmutables. Al convertir nuestra cadena en un Blob, podemos acceder a su propiedad size para determinar el tamaño en bytes.

En la consola de Node.js, creemos una función para calcular el tamaño en bytes:

const byteSize = (str) => new Blob([str]).size;

Esta función toma una cadena como entrada, la convierte en un Blob y devuelve su tamaño en bytes.

Probemos esta función con un ejemplo sencillo:

byteSize("Hello World");

Debería ver la salida:

11

En este caso, la cantidad de caracteres y el tamaño en bytes son los mismos porque "Hello World" contiene solo caracteres ASCII, cada uno representado por un solo byte.

Ahora intentemos con un carácter no ASCII:

byteSize("😀");

Debería ver la salida:

4

Esto muestra que aunque el emoji parece ser un solo carácter, en realidad ocupa 4 bytes de almacenamiento.

Pruebas con diferentes tipos de cadenas

Exploremos cómo diferentes tipos de caracteres afectan el tamaño en bytes de una cadena.

En la consola de Node.js, probemos nuestra función byteSize con varias cadenas:

1. Texto en inglés sencillo:

byteSize("The quick brown fox jumps over the lazy dog");

Salida esperada:

43

2. Números y caracteres especiales:

byteSize("123!@#$%^&*()");

Salida esperada:

13

3. Una mezcla de caracteres ASCII y no ASCII:

byteSize("Hello, 世界!");

Salida esperada:

13

4. Varios emojis:

byteSize("😀😃😄😁");

Salida esperada:

16

Note que con los tipos de caracteres mixtos, especialmente con caracteres no ASCII como los caracteres chinos y los emojis, el tamaño en bytes es mayor que la cantidad de caracteres.

Esto es importante de entender cuando se trabaja con datos que pueden contener caracteres internacionales o símbolos especiales, ya que afecta los requisitos de almacenamiento y los tamaños de transferencia de datos.

Salga de la consola de Node.js escribiendo:

.exit

Esto lo devolverá al indicador de terminal normal.

Crear un archivo de ejemplo práctico

Ahora creemos un archivo de JavaScript para implementar nuestra función de cálculo de tamaño en bytes de una manera más práctica. Esto demostrará cómo podrías utilizar esta función en una aplicación del mundo real.

1. Crea un nuevo archivo en el WebIDE. Haz clic en el icono de "Nuevo archivo" en la barra lateral del explorador de archivos y asígnalo el nombre byteSizeCalculator.js.

2. Añade el siguiente código al archivo:

/**
 * Calculate the byte size of a given string.
 * @param {string} str - The string to calculate the byte size for.
 * @returns {number} The size in bytes.
 */
function calculateByteSize(str) {
  return new Blob([str]).size;
}

// Examples with different types of strings
const examples = [
  "Hello World",
  "😀",
  "The quick brown fox jumps over the lazy dog",
  "123!@#$%^&*()",
  "Hello, 世界!",
  "😀😃😄😁"
];

// Display the results
console.log("String Byte Size Calculator\n");
console.log("String".padEnd(45) + "| Characters | Bytes");
console.log("-".repeat(70));

examples.forEach((example) => {
  console.log(
    `"${example}"`.padEnd(45) +
      `| ${example.length}`.padEnd(12) +
      `| ${calculateByteSize(example)}`
  );
});

3. Guarda el archivo presionando Ctrl+S o seleccionando Archivo > Guardar desde el menú.

4. Ejecuta el archivo desde la terminal:

node byteSizeCalculator.js

Deberías ver una salida similar a esta:

String Byte Size Calculator

String                                      | Characters | Bytes
----------------------------------------------------------------------
"Hello World"                               | 11         | 11
"😀"                                        | 1          | 4
"The quick brown fox jumps over the lazy dog" | 43         | 43
"123!@#$%^&*()"                            | 13         | 13
"Hello, 世界!"                              | 10         | 13
"😀😃😄😁"                                  | 4          | 16

Esta tabla muestra claramente la diferencia entre la cantidad de caracteres y el tamaño en bytes para diferentes tipos de cadenas.

Comprender estas diferencias es crucial cuando:

• Estableces límites en la entrada de usuarios en formularios web
• Calculas los requisitos de almacenamiento para datos de texto
• Trabajas con APIs que tienen limitaciones de tamaño
• Optimizas la transferencia de datos a través de redes

Resumen

Felicidades por completar el laboratorio de cálculo de tamaño en bytes de cadenas. Has aprendido:

1. Cómo las cadenas se representan en JavaScript como unidades de código UTF-16
2. Cómo utilizar el objeto Blob para calcular el tamaño en bytes de una cadena
3. La diferencia entre la cantidad de caracteres y el tamaño en bytes para varios tipos de caracteres
4. Cómo crear una utilidad práctica para calcular el tamaño en bytes de cadenas

Este conocimiento es valioso cuando se trabaja con:

• Aplicaciones web que manejan la entrada de usuarios
• Sistemas de almacenamiento de datos
• Solicitudes de red y APIs con limitaciones de tamaño
• Internacionalización y aplicaciones multilingües

Comprender el tamaño en bytes de las cadenas ayuda a garantizar que tus aplicaciones gestionen correctamente el almacenamiento y la transferencia de datos, especialmente cuando se trata de caracteres internacionales, emojis y símbolos especiales.