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

Метод 1: проверка регулярных выражений
Одним из распространенных подходов является использование регулярных выражений для проверки десятичных входных данных. Вот пример использования метода testдля проверки того, содержит ли строка неотрицательное десятичное число:

function isNonNegativeDecimal(input: string): boolean {
  const decimalRegex = /^\d+(\.\d+)?$/;
  return decimalRegex.test(input);
}
// Usage
const userInput = "3.14";
console.log(isNonNegativeDecimal(userInput)); // Output: true

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

function isNonNegativeDecimal(input: string): boolean {
  const number = Number(input);
  return !isNaN(number) && number >= 0;
}
// Usage
const userInput = "5.67";
console.log(isNonNegativeDecimal(userInput)); // Output: true

Метод 3: тип ввода и атрибут шага
HTML5 предоставляет атрибут typeэлемента inputв качестве встроенного механизма проверки. Установив для typeзначение "number", а для атрибута stepзначение "any", мы можем разрешить ввод неотрицательных десятичных чисел:

<input type="number" step="any" />

Метод 4: пользовательская директива проверки ввода (Angular)
Если вы используете Angular, вы можете создать специальную директиву для обработки десятичной проверки ввода. Вот пример:

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[appNonNegativeDecimal]'
})
export class NonNegativeDecimalDirective {
  private regex: RegExp = /^\d+(\.\d+)?$/;
  constructor(private el: ElementRef) {}
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    const inputValue: string = this.el.nativeElement.value.concat(event.key);
    if (inputValue && !String(inputValue).match(this.regex)) {
      event.preventDefault();
    }
  }
}

Использование:

<input type="text" appNonNegativeDecimal />

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

Не забывайте обрабатывать крайние случаи и предоставлять пользователям соответствующую обратную связь при проверке десятичных входных данных. Приятного кодирования!