Calcul de la taille en octets d'une chaîne de caractères

Introduction

Dans ce laboratoire (lab), nous allons explorer comment calculer la taille en octets d'une chaîne de caractères (string) à l'aide de JavaScript. Comprendre la taille en octets des chaînes de caractères est essentiel lorsqu'on travaille avec le transfert de données, les calculs de stockage ou les limitations des API où la taille des données est importante.

Nous allons apprendre à convertir une chaîne de caractères en un objet Blob et à utiliser ses propriétés pour déterminer la taille exacte en octets. Cette technique est couramment utilisée en développement web lorsqu'on gère des téléchargements de fichiers, des requêtes réseau ou l'optimisation du stockage de données.

Skills Graph

Comprendre la représentation des chaînes de caractères (strings) en JavaScript

Avant de calculer la taille en octets des chaînes de caractères, il est important de comprendre comment les chaînes de caractères sont représentées en JavaScript.

En JavaScript, les chaînes de caractères sont des séquences d'unités de code UTF - 16. Cela signifie que des caractères tels que les emojis ou certains symboles peuvent nécessiter plus d'un octet pour être représentés. Par exemple, une simple lettre anglaise prend 1 octet, mais un emoji peut prendre 4 octets.

Commençons par lancer Node.js dans le terminal :

1. Ouvrez le terminal en cliquant sur l'icône du terminal dans l'interface WebIDE.
2. Tapez la commande suivante et appuyez sur Entrée :

node

Vous devriez maintenant être dans la console interactive Node.js, qui ressemble à quelque chose comme ceci :

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

Dans cette console, nous pouvons tester directement du code JavaScript. Essayez de taper la commande suivante pour voir la longueur d'une chaîne de caractères :

"Hello World".length;

Vous devriez voir le résultat suivant :

11

Cela nous donne le nombre de caractères, mais pas la taille réelle en octets. Le nombre de caractères et la taille en octets peuvent être différents, en particulier avec des caractères spéciaux. Explorons cela plus en détail à l'étape suivante.

Utilisation de Blob pour calculer la taille en octets d'une chaîne de caractères (string)

Maintenant que nous comprenons la représentation des chaînes de caractères, apprenons à calculer la taille réelle en octets d'une chaîne de caractères à l'aide de l'objet Blob.

Un Blob (Binary Large Object) représente un objet semblable à un fichier contenant des données brutes immuables. En convertissant notre chaîne de caractères en un Blob, nous pouvons accéder à sa propriété size pour déterminer la taille en octets.

Dans la console Node.js, créons une fonction pour calculer la taille en octets :

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

Cette fonction prend une chaîne de caractères en entrée, la convertit en un Blob et renvoie sa taille en octets.

Testons cette fonction avec un exemple simple :

byteSize("Hello World");

Vous devriez voir le résultat suivant :

11

Dans ce cas, le nombre de caractères et la taille en octets sont les mêmes car "Hello World" ne contient que des caractères ASCII, chacun représenté par un seul octet.

Essayons maintenant avec un caractère non-ASCII :

byteSize("😀");

Vous devriez voir le résultat suivant :

4

Cela montre que bien que l'emoji apparaisse comme un seul caractère, il occupe en réalité 4 octets de stockage.

Tests avec différents types de chaînes de caractères (strings)

Explorons comment différents types de caractères affectent la taille en octets d'une chaîne de caractères.

Dans la console Node.js, testons notre fonction byteSize avec diverses chaînes de caractères :

1. Texte anglais simple :

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

Résultat attendu :

43

2. Nombres et caractères spéciaux :

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

Résultat attendu :

13

3. Un mélange de caractères ASCII et non-ASCII :

byteSize("Hello, 世界!");

Résultat attendu :

13

4. Plusieurs emojis :

byteSize("😀😃😄😁");

Résultat attendu :

16

Remarquez qu'avec les types de caractères mixtes, en particulier avec des caractères non-ASCII tels que les caractères chinois et les emojis, la taille en octets est supérieure au nombre de caractères.

Il est important de comprendre cela lorsque vous travaillez avec des données qui peuvent contenir des caractères internationaux ou des symboles spéciaux, car cela affecte les besoins de stockage et les tailles de transfert de données.

Quittez la console Node.js en tapant :

.exit

Cela vous ramènera à l'invite de commande normale du terminal.

Création d'un fichier d'exemple pratique

Maintenant, créons un fichier JavaScript pour implémenter notre fonction de calcul de taille en octets de manière plus pratique. Cela montrera comment vous pourriez utiliser cette fonction dans une application du monde réel.

1. Créez un nouveau fichier dans le WebIDE. Cliquez sur l'icône "Nouveau fichier" dans la barre latérale de l'explorateur de fichiers et nommez-le byteSizeCalculator.js.

2. Ajoutez le code suivant au fichier :

/**
 * 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. Enregistrez le fichier en appuyant sur Ctrl+S ou en sélectionnant Fichier > Enregistrer dans le menu.

4. Exécutez le fichier depuis le terminal :

node byteSizeCalculator.js

Vous devriez voir un résultat similaire à ceci :

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

Ce tableau montre clairement la différence entre le nombre de caractères et la taille en octets pour différents types de chaînes de caractères.

Comprendre ces différences est crucial lorsque :

• Vous définissez des limites pour les entrées utilisateur dans les formulaires web
• Vous calculez les besoins de stockage pour les données textuelles
• Vous travaillez avec des API qui ont des limitations de taille
• Vous optimisez le transfert de données sur les réseaux

Résumé

Félicitations pour avoir terminé le laboratoire (lab) sur le calcul de la taille en octets des chaînes de caractères. Vous avez appris :

1. Comment les chaînes de caractères sont représentées en JavaScript sous forme d'unités de code UTF-16
2. Comment utiliser l'objet Blob pour calculer la taille en octets d'une chaîne de caractères
3. La différence entre le nombre de caractères et la taille en octets pour différents types de caractères
4. Comment créer un utilitaire pratique pour calculer la taille en octets des chaînes de caractères

Ces connaissances sont précieuses lorsque vous travaillez avec :

• Des applications web qui gèrent les entrées utilisateur
• Des systèmes de stockage de données
• Des requêtes réseau et des API avec des limitations de taille
• Des applications d'internationalisation et multilingues

Comprendre les tailles en octets des chaînes de caractères vous aide à vous assurer que vos applications gèrent correctement le stockage et le transfert de données, en particulier lorsqu'elles traitent des caractères internationaux, des emojis et des symboles spéciaux.