Хитрости JavaScript: вставка точки через каждые три цифры

В этой статье блога мы рассмотрим различные методы JavaScript для решения общей задачи: вставки точки через каждые три цифры числа. Независимо от того, работаете ли вы над финансовым приложением, проектом визуализации данных или просто хотите улучшить читаемость больших чисел, эти методы пригодятся. Давайте погрузимся!

Метод 1: использование регулярных выражений
Пример кода:

function addPoints(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
// Usage
console.log(addPoints(1000000)); // Output: 1.000.000

Объяснение:
В этом методе мы преобразуем число в строку и используем функцию replace()с шаблоном регулярного выражения. Шаблон \B(?=(\d{3})+(?!\d))соответствует любой граничной позиции, не являющейся словом, за которой следуют группы из трех цифр, исключая последнюю группу, если за ней не следует другая цифра. Мы заменяем эти неграничные позиции точкой, фактически вставляя ее через каждые три цифры.

Метод 2: использование API Intl.NumberFormat
Пример кода:

function addPoints(number) {
  const formatter = new Intl.NumberFormat();
  return formatter.format(number);
}
// Usage
console.log(addPoints(1000000)); // Output: 1,000,000

Объяснение:
API Intl.NumberFormatпредоставляет удобный способ форматирования чисел на основе правил, специфичных для локали. По умолчанию используются настройки локали системы, которые часто включают вставку запятых в качестве разделителей тысяч. Этот метод использует этот API для достижения желаемого результата.

Метод 3: использование цикла и объединения строк
Пример кода:

function addPoints(number) {
  const numString = number.toString();
  let formattedNumber = "";
  let counter = 0;
  for (let i = numString.length - 1; i >= 0; i--) {
    formattedNumber = numString[i] + formattedNumber;
    counter++;
    if (counter === 3 && i !== 0) {
      formattedNumber = "." + formattedNumber;
      counter = 0;
    }
  }
  return formattedNumber;
}
// Usage
console.log(addPoints(1000000)); // Output: 1.000.000

Объяснение:
В этом методе мы преобразуем число в строку и перебираем его от последнего символа к первому. Мы отслеживаем счетчик, который увеличивается с каждой цифрой, добавляемой к отформатированному числу. Когда счетчик достигает трех (что означает добавление трех цифр), мы вставляем точку перед добавлением следующей цифры. Этот процесс продолжается до тех пор, пока не будут обработаны все цифры.

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