Berechnung der Byte-Größe von Zeichenketten

Einführung

In diesem Lab werden wir untersuchen, wie man die Byte-Größe einer Zeichenkette mit JavaScript berechnet. Das Verständnis der Byte-Größe von Zeichenketten ist unerlässlich, wenn man mit Datenübertragung, Speicherberechnungen oder API-Einschränkungen arbeitet, bei denen die Datengröße eine Rolle spielt.

Wir werden lernen, wie man eine Zeichenkette in ein Blob-Objekt umwandelt und dessen Eigenschaften nutzt, um die genaue Größe in Bytes zu bestimmen. Diese Technik wird in der Webentwicklung häufig eingesetzt, wenn es um Dateiuploads, Netzwerkanfragen oder die Optimierung der Datenspeicherung geht.

Skills Graph

Das Verständnis der JavaScript-Zeichenkettenrepräsentation

Bevor wir die Byte-Größe von Zeichenketten berechnen, ist es wichtig zu verstehen, wie Zeichenketten in JavaScript repräsentiert werden.

In JavaScript sind Zeichenketten Sequenzen von UTF-16-Codeeinheiten. Das bedeutet, dass Zeichen wie Emojis oder bestimmte Symbole möglicherweise mehr als ein Byte zur Darstellung benötigen. Beispielsweise nimmt ein einfacher englischer Buchstabe 1 Byte ein, während ein Emoji 4 Bytes benötigen kann.

Beginnen wir damit, Node.js im Terminal zu starten:

1. Öffnen Sie das Terminal, indem Sie auf das Terminal-Symbol in der WebIDE-Oberfläche klicken.
2. Geben Sie den folgenden Befehl ein und drücken Sie die Eingabetaste:

node

Sie sollten nun in der interaktiven Node.js-Konsole sein, die in etwa so aussieht:

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

In dieser Konsole können wir direkt mit JavaScript-Code experimentieren. Versuchen Sie, den folgenden Befehl einzugeben, um die Länge einer Zeichenkette anzuzeigen:

"Hello World".length;

Sie sollten die folgende Ausgabe sehen:

11

Dies gibt uns die Anzahl der Zeichen, aber nicht die tatsächliche Byte-Größe. Die Anzahl der Zeichen und die Byte-Größe können unterschiedlich sein, insbesondere bei Sonderzeichen. Lassen Sie uns dies im nächsten Schritt genauer untersuchen.

Die Verwendung von Blob zur Berechnung der Byte-Größe von Zeichenketten

Nachdem wir nun die Zeichenkettenrepräsentation verstehen, lernen wir, wie man die tatsächliche Byte-Größe einer Zeichenkette mithilfe des Blob-Objekts berechnet.

Ein Blob (Binary Large Object) repräsentiert ein dateiähnliches Objekt aus unveränderlichen, Rohdaten. Indem wir unsere Zeichenkette in einen Blob umwandeln, können wir auf seine size-Eigenschaft zugreifen, um die Byte-Größe zu bestimmen.

In der Node.js-Konsole erstellen wir eine Funktion zur Berechnung der Byte-Größe:

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

Diese Funktion nimmt eine Zeichenkette als Eingabe, wandelt sie in einen Blob um und gibt seine Größe in Bytes zurück.

Testen wir diese Funktion an einem einfachen Beispiel:

byteSize("Hello World");

Sie sollten die folgende Ausgabe sehen:

11

In diesem Fall sind die Anzahl der Zeichen und die Byte-Größe gleich, da "Hello World" nur ASCII-Zeichen enthält, die jeweils durch ein einzelnes Byte repräsentiert werden.

Versuchen wir es nun mit einem Nicht-ASCII-Zeichen:

byteSize("😀");

Sie sollten die folgende Ausgabe sehen:

4

Dies zeigt, dass das Emoji zwar als einzelnes Zeichen erscheint, aber tatsächlich 4 Bytes Speicherplatz beansprucht.

Testen mit verschiedenen Zeichenkettenarten

Lassen Sie uns untersuchen, wie verschiedene Zeichentypen die Byte-Größe einer Zeichenkette beeinflussen.

In der Node.js-Konsole testen wir unsere byteSize-Funktion mit verschiedenen Zeichenketten:

1. Einfacher englischer Text:

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

Erwartete Ausgabe:

43

2. Zahlen und Sonderzeichen:

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

Erwartete Ausgabe:

13

3. Eine Mischung aus ASCII- und Nicht-ASCII-Zeichen:

byteSize("Hello, 世界!");

Erwartete Ausgabe:

13

4. Mehrere Emojis:

byteSize("😀😃😄😁");

Erwartete Ausgabe:

16

Beachten Sie, dass bei gemischten Zeichentypen, insbesondere bei Nicht-ASCII-Zeichen wie chinesischen Zeichen und Emojis, die Byte-Größe größer ist als die Anzahl der Zeichen.

Dies ist wichtig zu verstehen, wenn Sie mit Daten arbeiten, die möglicherweise internationale Zeichen oder Sonderzeichen enthalten, da dies die Speicheranforderungen und die Datenübertragungsgrößen beeinflusst.

Lassen Sie uns die Node.js-Konsole verlassen, indem wir Folgendes eingeben:

.exit

Dadurch gelangen Sie zurück zum normalen Terminal-Prompt.

Erstellen einer praktischen Beispiel-Datei

Jetzt erstellen wir eine JavaScript-Datei, um unsere Funktion zur Berechnung der Byte-Größe auf praktische Weise umzusetzen. Dies zeigt, wie Sie diese Funktion in einer realen Anwendung verwenden könnten.

1. Erstellen Sie eine neue Datei im WebIDE. Klicken Sie auf das Symbol "Neue Datei" in der Datei-Explorer-Sidebar und benennen Sie sie byteSizeCalculator.js.

2. Fügen Sie den folgenden Code in die Datei ein:

/**
 * 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. Speichern Sie die Datei, indem Sie Strg+S drücken oder über das Menü Datei > Speichern auswählen.

4. Führen Sie die Datei über das Terminal aus:

node byteSizeCalculator.js

Sie sollten eine Ausgabe ähnlich der folgenden sehen:

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

Diese Tabelle zeigt deutlich den Unterschied zwischen der Anzahl der Zeichen und der Byte-Größe für verschiedene Arten von Zeichenketten.

Das Verständnis dieser Unterschiede ist entscheidend, wenn:

• Sie Grenzwerte für Benutzereingaben in Webformularen festlegen
• Sie die Speicheranforderungen für Textdaten berechnen
• Sie mit APIs arbeiten, die Größenbeschränkungen haben
• Sie die Datenübertragung über Netzwerke optimieren

Zusammenfassung

Herzlichen Glückwunsch, dass Sie das Labor "Berechnung der Byte-Größe von Zeichenketten" abgeschlossen haben. Sie haben gelernt:

1. Wie Zeichenketten in JavaScript als UTF-16-Codeeinheiten dargestellt werden
2. Wie Sie das Blob-Objekt verwenden, um die Byte-Größe einer Zeichenkette zu berechnen
3. Den Unterschied zwischen der Anzahl der Zeichen und der Byte-Größe für verschiedene Zeichentypen
4. Wie Sie ein praktisches Hilfsprogramm zur Berechnung der Byte-Größe von Zeichenketten erstellen

Dieses Wissen ist wertvoll, wenn Sie mit folgenden Dingen arbeiten:

• Web-Anwendungen, die Benutzereingaben verarbeiten
• Datenspeichersystemen
• Netzwerkanfragen und APIs mit Größenbeschränkungen
• Internationalisierung und mehrsprachigen Anwendungen

Das Verständnis der Byte-Größen von Zeichenketten hilft dabei, sicherzustellen, dass Ihre Anwendungen Daten speichern und übertragen, insbesondere wenn es um internationale Zeichen, Emojis und Sonderzeichen geht.