TypeScript: строку в число и число в строку

Чтобы преобразовать строку в число в TypeScript, вызовите Number(text). Результат имеет тип number и равен NaN, если текст не является корректным числом. Для текста с символами в конце, например "42px", используйте parseInt(text, 10) или parseFloat(text).

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

Все четыре преобразования возвращают тип number. TypeScript не знает, был ли текст корректным; некорректная строка всё равно даёт number, просто его значение равно NaN.

Почему преобразование обязательно

Поля форм, параметры URL, переменные окружения и содержимое файлов приходят строками. TypeScript не даст использовать строку там, где ожидается число:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Арифметика с -, * и / над строкой считается ошибкой. + разрешён, но склеивает строки, поэтому "3" + 10 даёт строку "310". Вот почему сначала нужно преобразование: Number(quantity) * 10.

Утверждение типа тоже не поможет. quantity as number отвергается (TS2352), а если протолкнуть его через as unknown as number, компилятор просто замолчит: во время выполнения значение останется строкой.

Number, parseInt, parseFloat и унарный плюс

На чистых данных все четыре функции дают одно и то же, а во всём остальном расходятся. В таблице реальный вывод каждой из них в Node:

Правила, которые стоят за таблицей:

• Number и унарный + работают одинаково. Они преобразуют всю строку после обрезки пробелов, понимают 1e3 и шестнадцатеричный 0x и возвращают NaN, если что-то осталось. Пустая строка или строка из одних пробелов превращается в 0.
• parseInt и parseFloat читают с начала и останавливаются на первом символе, который не могут использовать, поэтому "42px" и "1,000" дают частичные числа. Пустая строка даёт NaN.
• parseInt отбрасывает дробную часть и не понимает экспоненту: "1e3" обрывается на e.
• Разделители разрядов (12_000) допустимы в исходном коде, но не в строках.

Для проверки ввода строже Number. parseInt и parseFloat подходят для текста, в котором действительно есть единица измерения или суффикс, например размеров в CSS.

Обработка некорректного ввода: NaN

NaN имеет тип number, поэтому компилятор о нём никогда не предупреждает. Проверяйте результат сами, через Number.isNaN или Number.isFinite:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

Возвращаемый тип number | undefined делает ошибку частью типа, и каждый вызывающий код обязан её обработать, прежде чем считать. Number.isFinite к тому же отсекает Infinity, которое Number("Infinity") охотно возвращает.

Избегайте глобального isNaN(x): он сначала преобразует аргумент, поэтому в JavaScript isNaN("abc") равно true. Объявление в TypeScript принимает только number, так что передача строки даёт ошибку TS2345, и это намёк использовать Number.isNaN на уже преобразованном значении.

Строку в целое число

Всегда передавайте parseInt второй аргумент, основание системы счисления: 10 для десятичного текста. Он необязателен, но показывает намерение и важен для других оснований. Чтобы получить целое из десятичной строки, преобразуйте её, а затем явно округлите.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt ожидает строку: parseInt(12.7) даёт ошибку компиляции (TS2345), и это полезно, потому что в JavaScript parseInt сначала превращает число в текст и выдаёт неверные ответы для значений вроде 0.0000005 (возвращает 5). Для чисел используйте Math.trunc. Для целых больше Number.MAX_SAFE_INTEGER BigInt(text) разбирает значение полностью (и на некорректном тексте бросает SyntaxError вместо того, чтобы вернуть NaN).

Число в строку

String(n), n.toString() и `${n}` одинаково превращают число в его кратчайшую строковую форму. Методы форматирования дают больше контроля:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed округляет двоичное значение, а не то десятичное, которое вы написали, поэтому (1.005).toFixed(2) равно "1.00": 1.005 хранится как число чуть меньше 1.005. Для денег храните суммы в целых центах или форматируйте через Intl.NumberFormat.

String(n) работает и с null и undefined (давая "null" и "undefined"), тогда как n.toString() в режиме strict был бы ошибкой компиляции, раз значение может отсутствовать.

Краткая шпаргалка