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

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

Для преобразования строки в число в TypeScript можно использовать несколько методов, включая parseInt() для целых чисел, parseFloat() для десятичных чисел, функцию Number() или унарный оператор плюс (+). Каждый метод имеет конкретные случаи использования и особенности поведения, которые делают их подходящими для различных сценариев в вашем коде.

Содержание

• Обзор методов преобразования строки в число
• Использование parseInt() для преобразования в целое число
• Использование parseFloat() для преобразования в десятичное число
• Использование функции Number()
• Использование унарного оператора плюса (+)
• Лучшие практики и обработка ошибок
• Полные примеры решений

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

TypeScript, как надмножество JavaScript, наследует все методы преобразования строки в число, доступные в JavaScript. Эти методы служат разным целям и имеют уникальные особенности поведения, которые делают их подходящими для различных сценариев преобразования.

Основные доступные методы:

1. parseInt() - Преобразует строку в целое число
2. parseFloat() - Преобразует строку в число с плавающей запятой
3. Number() - Преобразует строку в число (целое или десятичное)
4. Унарный оператор плюса (+) - Быстрое преобразование с использованием знака плюс

Каждый метод по-разному обрабатывает крайние случаи и нечисловое содержимое, поэтому выбор правильного метода зависит от ваших конкретных требований.

Использование parseInt() для преобразования в целое число

Функция parseInt() преобразует строку в целое число, анализируя ее в соответствии с указанным основанием (радиксом). Этот метод идеален, когда вам нужны именно целочисленные значения.

Базовый синтаксис

parseInt(строка, основание)

Примеры

const str1: string = "123";
const num1: number = parseInt(str1, 10); // Возвращает: 123

const str2: string = "  456  ";
const num2: number = parseInt(str2, 10); // Возвращает: 456 (игнорирует пробелы)

const str3: string = "789px";
const num3: number = parseInt(str3, 10); // Возвращает: 789 (останавливается на нечисловом символе)

Ключевые особенности поведения

• Останавливается на нечисловых символах: Функция анализирует строку до первого символа, не являющегося частью представления числа
• Обработка пробелов: Начальные и конечные пробелы игнорируются
• Основание важно: Всегда указывайте основание (основание системы счисления) для предсказуемого поведения

Как объясняется на Mozilla Developer Network, parseInt() принимает строковый аргумент, анализирует его и возвращает целочисленный эквивалент в соответствии с указанным основанием.

Типичные случаи использования

// Преобразование пользовательского ввода из формы
const userInput: string = "42";
const age: number = parseInt(userInput, 10);

// Извлечение числа из смешанного содержимого
const cssValue: string = "100px";
const pixels: number = parseInt(cssValue, 10);

Использование parseFloat() для преобразования в десятичное число

Функция parseFloat() преобразует строку в число с плавающей запятой. В отличие от parseInt(), она сохраняет десятичные значения и идеально подходит для обработки денежных значений, научных расчетов или любых сценариев, требующих десятичной точности.

Базовый синтаксис

parseFloat(строка)

Примеры

const str1: string = "3.14";
const num1: number = parseFloat(str1); // Возвращает: 3.14

const str2: string = "  2.718  ";
const num2: number = parseFloat(str2); // Возвращает: 2.718 (игнорирует пробелы)

const str3: string = "99.99abc";
const num3: number = parseFloat(str3); // Возвращает: 99.99 (останавливается на нечисловом символе)

Ключевые особенности поведения

• Сохраняет десятичную точность: В отличие от parseInt(), она не удаляет значения после десятичной точки
• Останавливается на нечисловых символах: Похоже на parseInt(), но распознает десятичные точки
• Нет параметра основания: Всегда анализирует как десятичное число с основанием 10

Как указано в официальной документации, parseFloat() принимает строку и анализирует ее, возвращая число с плавающей запятой.

Типичные случаи использования

// Преобразование валютных значений
const priceStr: string = "19.99";
const price: number = parseFloat(priceStr);

// Обработка научных измерений
const temperatureStr: string = "98.6°F";
const temperature: number = parseFloat(temperatureStr);

// Анализ CSS-значений с единицами измерения
const widthStr: string = "50.5%";
const width: number = parseFloat(widthStr);

Использование функции Number()

Функция-конструктор Number() преобразует строку в число, либо целое, либо с плавающей запятой. Этот метод более строгий, чем parseInt() и parseFloat(), и возвращает NaN (Not a Number) для любого недопустимого ввода.

Базовый синтаксис

Number(строка)

Примеры

const str1: string = "123";
const num1: number = Number(str1); // Возвращает: 123

const str2: string = "3.14";
const num2: number = Number(str2); // Возвращает: 3.14

const str3: string = "  456  ";
const num3: number = Number(str3); // Возвращает: 456 (обрезает пробелы)

const str4: string = "abc";
const num4: number = Number(str4); // Возвращает: NaN (недопустимый ввод)

Ключевые особенности поведения

• Строгий анализ: Возвращает NaN для любого нечислового содержимого
• Обрезка пробелов: Начальные и конечные пробелы удаляются
• Нет частичного анализа: В отличие от parseInt() и parseFloat(), она не останавливается на нечисловых символах

Как объясняется на GeeksforGeeks, функция Number() является глобальной функцией, которая преобразует свой аргумент в число.

Типичные случаи использования

// Требуется строгая проверка
const userInput: string = "42";
const validatedNumber: number = Number(userInput);

// Когда нужно обнаружить недопустимые преобразования
const valueStr: string = "invalid";
const value: number = Number(valueStr);
if (isNaN(value)) {
    console.log("Недопустимый формат числа");
}

Использование унарного оператора плюса (+)

Унарный оператор плюса (+) предоставляет краткий и часто более быстрый способ преобразования строк в числа в TypeScript. Этот метод синтаксически чист и работает аналогично функции Number().

Базовый синтаксис

+строка

Примеры

const str1: string = "123";
const num1: number = +str1; // Возвращает: 123

const str2: string = "3.14";
const num2: number = +str2; // Возвращает: 3.14

const str3: string = "  456  ";
const num3: number = +str3; // Возвращает: 456 (обрезает пробелы)

const str4: string = "abc";
const num4: number = +str4; // Возвращает: NaN (недопустимый ввод)

Ключевые особенности поведения

• Краткий синтаксис: Очень короткий и читаемый
• Похож на Number(): Поведение аналогично функции Number()
• Быстрое выполнение: Часто быстрее других методов в тестах производительности

Согласно Geekflare, например, +"98" будет оценено как 98, а +"0" - как число 0. Следовательно, мы можем использовать унарный оператор плюса (+) для преобразования строк в числа.

Типичные случаи использования

// Быстрые встроенные преобразования
const result: number = +"42" + 10; // Возвращает: 52

// Преобразование массивов
const stringNumbers: string[] = ["1", "2", "3"];
const numbers: number[] = stringNumbers.map(s => +s);

// Условные преобразования
const value: string = "123";
const numValue: number = +value || 0; // Резервное значение 0, если недопустимо

Лучшие практики и обработка ошибок

При преобразовании строк в числа в TypeScript важно правильно обрабатывать потенциальные ошибки и крайние случаи.

Стратегии обработки ошибок

1. Использование isNaN() для проверки

function safeConvert(str: string): number {
    const num = parseFloat(str);
    return isNaN(num) ? 0 : num; // Резервное значение 0, если недопустимо
}

// Использование
const result: number = safeConvert("invalid"); // Возвращает: 0

2. Использование try-catch для сложных случаев

function robustConvert(str: string): number {
    try {
        return Number(str);
    } catch {
        return 0; // Резервное значение
    }
}

3. Type Guards

function isNumber(str: string): str is string {
    return !isNaN(Number(str));
}

// Использование
if (isNumber(numberString)) {
    const numberValue = +numberString;
}

Вопросы производительности

• Унарный плюс (+) обычно является самым быстрым методом
• Функция Number() немного медленнее, но очень читаема
• parseInt()/parseFloat() медленнее из-за дополнительной логики анализа

Крайние случаи, которые следует учитывать

// Пустые строки
const empty: number = Number(""); // Возвращает: 0

// Null/undefined
const nullValue: number = Number(null); // Возвращает: 0
const undefinedValue: number = Number(undefined); // Возвращает: NaN

// Булевы значения
const trueValue: number = Number(true); // Возвращает: 1
const falseValue: number = Number(false); // Возвращает: 0

Как объясняется на TutorialsPoint, функция parseInt преобразует бесконечность, null, булевы значения true и false, пустые строки в NaN.

Полные примеры решений

Решение исходного вопроса

var numberString: string = "1234";
var numberValue: number = parseInt(numberString, 10); // Возвращает: 1234

// Альтернативные решения:
var numberValue2: number = parseFloat(numberString); // Также работает для целых чисел
var numberValue3: number = Number(numberString); // Строгое преобразование
var numberValue4: number = +numberString; // Унарный оператор плюса

Практические примеры

Пример 1: Обработка ввода из формы

function handleUserInput(input: string): number {
    // Использование parseInt для ввода возраста
    const age: number = parseInt(input, 10);
    
    if (isNaN(age)) {
        throw new Error("Недопустимый формат возраста");
    }
    
    return age;
}

// Использование
const userInput: string = "25";
const userAge: number = handleUserInput(userInput); // Возвращает: 25

Пример 2: Преобразование валюты

function parseCurrency(amount: string): number {
    // Удаление символов валюты и запятых
    const cleanAmount = amount.replace(/[^\d.]/g, '');
    return parseFloat(cleanAmount);
}

// Использование
const price: string = "$1,234.56";
const numericPrice: number = parseCurrency(price); // Возвращает: 1234.56

Пример 3: Научная нотация

function parseScientific(value: string): number {
    return Number(value); // Обрабатывает научную нотацию, например "1e3"
}

// Использование
const scientific: string = "2.5e2";
const result: number = parseScientific(scientific); // Возвращает: 250

Пример 4: Преобразование массива

function convertStringArray(numbers: string[]): number[] {
    return numbers.map(str => {
        // Использование parseFloat для смешанных массивов целых/десятичных чисел
        return parseFloat(str);
    });
}

// Использование
const stringNumbers: string[] = ["1", "2.5", "3", "4.75"];
const converted: number[] = convertStringArray(stringNumbers); // [1, 2.5, 3, 4.75]

Заключение

Преобразование строк в числа в TypeScript можно выполнить с помощью нескольких надежных методов, каждый из которых имеет свои преимущества:

1. Используйте parseInt(), когда вам нужны именно целые числа и вы хотите извлекать числа из смешанного содержимого
2. Используйте parseFloat() для десятичных значений, когда вам нужно сохранить точность
3. Используйте Number() для строгой проверки и когда нужно обнаруживать недопустимые преобразования
4. Используйте унарный оператор плюса (+) для кратких, быстрых преобразований, когда производительность критична

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

Для большинства практических приложений унарный оператор плюса или функция Number() обеспечивают отличный баланс между читаемостью и производительностью, в то время как parseInt() и parseFloat() остаются ценными для анализа чисел из смешанных строк.

Источники

1. How to Convert String to Number in TypeScript? - GeeksforGeeks
2. How to convert a string to number in TypeScript? - Stack Overflow
3. TypeScript String to Number: 5 Ways for Easy Conversion - Geekflare
4. Convert String to Number in TypeScript [With Examples] - SP Guides
5. Convert Strings to Numbers | TypeScript Guide by Convex
6. Convert String to Number in Typescript - Tektutorialshub
7. TypeScript string to number: Practical Conversion Guide - Dev Accelerate
8. How to convert string to number in TypeScript? - Tutorialspoint
9. Convert a String to a Number in TypeScript | bobbyhadz
10. Top 4 Methods to Convert a String to Number in TypeScript - SQL Pey