Как преобразовать строку в число в TypeScript: полное руководство

Основные способы преобразования строки в число в TypeScript

В TypeScript (как и в JavaScript) есть несколько способов преобразовать строку в число. Выбор зависит от контекста и требуемой точности. Рассмотрим все основные методы с примерами.

1. Функция Number() — универсальный способ

const str: string = "42";
const num: number = Number(str);
console.log(num); // 42
console.log(typeof num); // "number"

Плюсы:

• Простой и читаемый синтаксис
• Работает с целыми и дробными числами
• Возвращает NaN (Not a Number), если преобразование невозможно

Минусы:

• При пустой строке возвращает 0 (может быть неочевидно)
• Не отсекает пробелы — строка " 42 " преобразуется корректно

2. parseInt() — для целых чисел

const str: string = "42.7px";
const num: number = parseInt(str, 10);
console.log(num); // 42 (дробная часть отбрасывается, "px" игнорируется)

Важно: Второй аргумент (radix) — система счисления. Всегда указывайте 10 для десятичных чисел, иначе старые браузеры могут интерпретировать строку "08" как восьмеричное число.

Особенности:

• Игнорирует нечисловые символы после первого числа
• Полезен для парсинга CSS-значений ("100px", "2.5rem")
• Если строка начинается с нечислового символа — вернёт NaN

3. parseFloat() — для чисел с плавающей точкой

const str: string = "3.14abc";
const num: number = parseFloat(str);
console.log(num); // 3.14

Работает аналогично parseInt, но сохраняет десятичную часть.

4. Унарный оператор + — краткий синтаксис

const str: string = "123";
const num: number = +str;
console.log(num); // 123

Этот способ эквивалентен Number(str), но короче. Однако может снижать читаемость кода для новичков.

5. Приведение через ~~ (побитовое НЕ) — для целых чисел

const str: string = "42.9";
const num: number = ~~str;
console.log(num); // 42 (отбрасывает дробную часть)

Работает только для 32-битных целых чисел (диапазон от -2^31 до 2^31-1). Используйте с осторожностью.

Обработка ошибок и валидация

Всегда проверяйте результат преобразования:

function safeParseNumber(value: string): number | null {
  const num = Number(value);
  // Проверка на NaN и пустую строку
  if (isNaN(num) || value.trim() === "") {
    return null;
  }
  return num;
}

// Использование:
const ageInput: string = "25";
const age = safeParseNumber(ageInput);
if (age !== null && age >= 18) {
  console.log("Доступ разрешён");
} else {
  console.log("Некорректный возраст");
}

Рекомендации по выбору метода

• Для форм и пользовательского ввода: используйте Number() с проверкой через isNaN()
• Для парсинга CSS или смешанных строк: parseInt() или parseFloat()
• Для максимальной производительности: оператор + (но жертвуете читаемостью)
• Всегда обрабатывайте случай NaN — это убережёт от логических ошибок

Помните: TypeScript не проверяет корректность преобразования на этапе компиляции, поэтому валидация во время выполнения — ваша ответственность.

// Установка: npm install validator
import validator from 'validator';

function parseNumberSafe(value: string): number | null {
  if (!validator.isNumeric(value)) {
    return null;
  }
  return Number(value);
}

// Пример с zod (рекомендую для форм):
import { z } from 'zod';

const ageSchema = z.string().transform(val => {
  const num = Number(val);
  if (isNaN(num)) throw new Error("Invalid number");
  return num;
});

const result = ageSchema.safeParse("25");
if (result.success) {
  console.log(result.data); // 25 (уже number)
}

function isNumberString(value: string): value is `${number}` {
  return !isNaN(Number(value)) && value.trim() !== "";
}

function processAge(input: string): void {
  if (isNumberString(input)) {
    const age: number = Number(input);
    console.log(`Возраст: ${age}`);
  } else {
    console.log("Некорректный ввод");
  }
}