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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/str_manip("String Manipulation") javascript/NetworkingGroup -.-> javascript/api_interact("API Interaction") subgraph Lab Skills javascript/data_types -.-> lab-28182{{"Вычисление размера строки в байтах"}} javascript/functions -.-> lab-28182{{"Вычисление размера строки в байтах"}} javascript/str_manip -.-> lab-28182{{"Вычисление размера строки в байтах"}} javascript/api_interact -.-> lab-28182{{"Вычисление размера строки в байтах"}} end

Понимание представления строк в 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.
>
Open the node

В этой консоли мы можем напрямую экспериментировать с кодом 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
  1. Числа и специальные символы:
byteSize("123!@#$%^&*()");

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

13
  1. Смесь ASCII и не-ASCII символов:
byteSize("Hello, 世界!");

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

13
  1. Несколько эмодзи:
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)}`
  );
});
  1. Сохраните файл, нажав Ctrl+S или выбрав "Файл > Сохранить" из меню.

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

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 с ограничениями по размеру
  • Приложениями для интернационализации и мультиязычными приложениями

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