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

Метод 1: регулярное выражение
Один из способов добавления запятых к вводимым числам в TypeScript — использование регулярных выражений. Следующий код демонстрирует этот подход:

function addCommas(input: string): string {
  return input.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
const numberWithCommas = addCommas("1000000");
console.log(numberWithCommas);  // Output: "1,000,000"

Метод 2: Intl.NumberFormat
TypeScript предоставляет объект Intl.NumberFormat, который можно использовать для форматирования чисел в соответствии с языковыми стандартами и предпочтениями пользователя. Вот пример использования Intl.NumberFormatдля добавления запятых:

function addCommas(input: number): string {
  return new Intl.NumberFormat().format(input);
}
const numberWithCommas = addCommas(1000000);
console.log(numberWithCommas);  // Output: "1,000,000"

Метод 3: рекурсивный подход
Другой подход заключается в рекурсивном разбиении числа на более мелкие фрагменты и вставке между ними запятых. Вот реализация:

function addCommas(input: string): string {
  if (input.length <= 3) {
    return input;
  }
  const prefix = addCommas(input.slice(0, -3));
  const suffix = input.slice(-3);

  return `${prefix},${suffix}`;
}
const numberWithCommas = addCommas("1000000");
console.log(numberWithCommas);  // Output: "1,000,000"

Метод 4: библиотеки маскирования ввода
Использование библиотек маскирования ввода, таких как inputmaskили react-input-mask, может упростить процесс добавления запятых к вводимым числам. Эти библиотеки позволяют вам определить определенный формат поля ввода. Вот пример использования inputmask:

import Inputmask from "inputmask";
const inputElement = document.getElementById("numberInput");
Inputmask({ alias: "numeric", groupSeparator: "," }).mask(inputElement);

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

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