Красивый вывод количества байтов

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

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

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

Введение

В этом лабораторном занятии (LabEx) мы рассмотрим концепцию красивого вывода чисел, представляющих размер в байтах, в человекочитаемом формате с использованием JavaScript. Мы научимся преобразовывать заданное количество байт в КБ, МБ, ГБ, ТБ, ПБ, ЭБ, ЗБ и ЙБ с помощью массива - словаря единиц измерения. С помощью метода Number.prototype.toPrecision() мы обрежем число до определенного количества знаков и создадим красиво отформатированную строку для отображения результата.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") subgraph Lab Skills javascript/variables -.-> lab-28554{{"Красивый вывод количества байтов"}} javascript/data_types -.-> lab-28554{{"Красивый вывод количества байтов"}} javascript/arith_ops -.-> lab-28554{{"Красивый вывод количества байтов"}} javascript/comp_ops -.-> lab-28554{{"Красивый вывод количества байтов"}} javascript/cond_stmts -.-> lab-28554{{"Красивый вывод количества байтов"}} javascript/array_methods -.-> lab-28554{{"Красивый вывод количества байтов"}} end

Преобразование байтов в человекочитаемую строку

Для преобразования числа, представляющего размер в байтах, в человекочитаемую строку используйте функцию prettyBytes(). Обратите внимание на следующие моменты:

  • Функция использует массив - словарь единиц измерения, который доступен на основе показателя степени.
  • Вы можете использовать второй аргумент, precision, чтобы обрезать число до определенного количества знаков. Значение по умолчанию - 3.
  • Вы можете использовать третий аргумент, addSpace, чтобы добавить пробел между числом и единицей измерения. Значение по умолчанию - true.
  • Функция возвращает красиво отформатированную строку, учитывая переданные параметры и то, является ли число отрицательным или нет.

Вот код функции prettyBytes():

const prettyBytes = (num, precision = 3, addSpace = true) => {
  const UNITS = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  if (Math.abs(num) < 1) return num + (addSpace ? " " : "") + UNITS[0];
  const exponent = Math.min(
    Math.floor(Math.log10(num < 0 ? -num : num) / 3),
    UNITS.length - 1
  );
  const n = Number(
    ((num < 0 ? -num : num) / 1000 ** exponent).toPrecision(precision)
  );
  return (num < 0 ? "-" : "") + n + (addSpace ? " " : "") + UNITS[exponent];
};

А вот несколько примеров использования функции prettyBytes():

prettyBytes(1000); // '1 KB'
prettyBytes(-27145424323.5821, 5); // '-27.145 GB'
prettyBytes(123456789, 3, false); // '123MB'

Итог

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