Вычисление размера строки в байтах

Введение

В этом практическом занятии (лабораторной работе) мы рассмотрим, как вычислить размер строки в байтах с использованием JavaScript. Понимание размера строк в байтах является важным при работе с передачей данных, расчетами хранилища или ограничениями API, где размер данных имеет значение.

Мы научимся преобразовывать строку в объект Blob и использовать его свойства для определения точного размера в байтах. Эта техника широко используется в веб-разработке при работе с загрузкой файлов, сетевыми запросами или оптимизацией хранения данных.

Skills Graph

Понимание представления строк в JavaScript

Перед тем, как мы вычислим размер строки в байтах, важно понять, как строки представлены в JavaScript.

В JavaScript строки представляют собой последовательности кодовых единиц UTF - 16. Это означает, что такие символы, как эмодзи или определенные знаки, могут занимать более одного байта для представления. Например, простая английская буква занимает 1 байт, а эмодзи может занимать 4 байта.

Начнем с запуска Node.js в терминале:

1. Откройте терминал, нажав на иконку терминала в интерфейсе WebIDE.
2. Введите следующую команду и нажмите Enter:

node

Теперь вы должны находиться в интерактивной консоли Node.js, которая выглядит приблизительно так:

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

В этой консоли мы можем напрямую экспериментировать с кодом JavaScript. Попробуйте ввести следующую команду, чтобы увидеть длину строки:

"Hello World".length;

Вы должны увидеть следующий вывод:

11

Это дает нам количество символов, но не фактический размер в байтах. Количество символов и размер в байтах могут различаться, особенно при использовании специальных символов. Давайте рассмотрим это более подробно на следующем шаге.

Использование объекта Blob для вычисления размера строки в байтах

Теперь, когда мы понимаем, как представляются строки, давайте научимся вычислять фактический размер строки в байтах с использованием объекта Blob.

Объект Blob (Binary Large Object, двоичный большой объект) представляет собой файл-подобный объект неизменных необработанных данных. Преобразовав нашу строку в объект Blob, мы можем получить доступ к его свойству size для определения размера в байтах.

В консоли Node.js создадим функцию для вычисления размера в байтах:

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

Эта функция принимает строку в качестве входных данных, преобразует ее в объект Blob и возвращает его размер в байтах.

Протестируем эту функцию на простом примере:

byteSize("Hello World");

Вы должны увидеть следующий вывод:

11

В этом случае количество символов и размер в байтах совпадают, потому что строка "Hello World" содержит только ASCII-символы, каждый из которых представлен одним байтом.

Теперь попробуем с не-ASCII символом:

byteSize("😀");

Вы должны увидеть следующий вывод:

4

Это показывает, что хотя эмодзи выглядит как один символ, он на самом деле занимает 4 байта хранилища.

Тестирование с разными типами строк

Давайте исследуем, как разные типы символов влияют на размер строки в байтах.

В консоли Node.js протестируем нашу функцию byteSize с различными строками:

1. Простой английский текст:

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

Ожидаемый вывод:

43

2. Числа и специальные символы:

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

Ожидаемый вывод:

13

3. Смесь ASCII и не-ASCII символов:

byteSize("Hello, 世界!");

Ожидаемый вывод:

13

4. Несколько эмодзи:

byteSize("😀😃😄😁");

Ожидаемый вывод:

16

Обратите внимание, что при использовании смешанных типов символов, особенно не-ASCII символов, таких как китайские символы и эмодзи, размер в байтах больше, чем количество символов.

Это важно понимать при работе с данными, которые могут содержать международные символы или специальные знаки, так как это влияет на требования к хранению и размеры передаваемых данных.

Давайте выйдем из консоли Node.js, введя:

.exit

Это вернет вас к обычной командной строке терминала.

Создание практического примера файла

Теперь давайте создадим JavaScript-файл, чтобы реализовать нашу функцию для вычисления размера строки в байтах более практичным способом. Это продемонстрирует, как вы можете использовать эту функцию в реальном приложении.

1. Создайте новый файл в WebIDE. Нажмите на иконку "Новый файл" в боковой панели проводника файлов и назовите его byteSizeCalculator.js.

2. Добавьте следующий код в файл:

/**
 * 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. Сохраните файл, нажав Ctrl+S или выбрав "Файл > Сохранить" из меню.

4. Запустите файл из терминала:

node byteSizeCalculator.js

Вы должны увидеть вывод, похожий на следующий:

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

Эта таблица четко показывает разницу между количеством символов и размером в байтах для разных типов строк.

Понимание этих различий является важным, когда:

• Вы устанавливаете ограничения на пользовательский ввод в веб-формах
• Вычисляете требования к хранению текстовых данных
• Работаете с API, которые имеют ограничения по размеру
• Оптимизируете передачу данных по сети

Резюме

Поздравляем вас с успешным завершением лабораторной работы по вычислению размера строки в байтах. Вы узнали:

1. Как строки представлены в JavaScript в виде кодовых единиц UTF-16
2. Как использовать объект Blob для вычисления размера строки в байтах
3. Разницу между количеством символов и размером в байтах для различных типов символов
4. Как создать практическую утилиту для вычисления размера строки в байтах

Это знание ценно при работе с:

• Веб-приложениями, обрабатывающими пользовательский ввод
• Системами хранения данных
• Сетевыми запросами и API с ограничениями по размеру
• Приложениями для интернационализации и мультиязычными приложениями

Понимание размера строк в байтах помогает обеспечить правильное управление хранением и передачей данных в ваших приложениях, особенно при работе с международными символами, эмодзи и специальными знаками.