LearnJS

parseInt()

parseInt() - это встроенная функция JavaScript, которая пытается получить целое число из переданного значения.

Чаще всего она нужна, когда число записано в строке и после него идут лишние символы. Например, из строки ‘120px’ нужно получить обычное число 120.

let width = '120px';
let numberWidth = parseInt(width, 10);

console.log(numberWidth);
console.log(typeof numberWidth);

Результат:

120
number

То есть parseInt() прочитал число в начале строки и вернул его как тип number.

Что такое parseInt()

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

console.log(parseInt('25', 10));
console.log(parseInt('25px', 10));
console.log(parseInt('25 лет', 10));

В консоли будет:

25
25
25

Во всех трех примерах строка начинается с числа 25, поэтому функция смогла его получить.

Важно: parseInt() не меняет исходную строку. Он возвращает новое значение, которое можно сохранить в переменную или сразу использовать в выражении.

let value = '40px';
let result = parseInt(value, 10);

console.log(value);
console.log(result);

Результат:

40px
40

Строка value осталась прежней, а в переменной result лежит уже число.

Синтаксис

Общая запись выглядит так:

parseInt(value, radix);

value - значение, из которого нужно получить целое число.

radix - система счисления. Для обычных десятичных чисел указывают 10.

let count = parseInt('15', 10);

console.log(count);

Результат:

15

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

Как parseInt() читает строку

parseInt() читает строку с начала. Если в начале есть пробелы, он их пропускает. Затем берет цифры до первого символа, который уже не подходит для числа.

console.log(parseInt('   42px', 10));
console.log(parseInt('18 years', 10));
console.log(parseInt('100%', 10));

Результат:

42
18
100

Как только JavaScript встречает символ, который не может быть частью числа, чтение останавливается.

console.log(parseInt('123abc456', 10));

Результат:

123

Строка начинается с 123, потом идет буква a. На ней parseInt() остановился, поэтому часть 456 уже не учитывается.

Знак минуса тоже учитывается:

console.log(parseInt('-15px', 10));
console.log(parseInt('+20px', 10));

Результат:

-15
20

Второй аргумент

Второй аргумент parseInt() показывает, в какой системе счисления записано число.

В обычной жизни мы почти всегда используем десятичную систему: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Поэтому чаще всего вторым аргументом пишут 10.

console.log(parseInt('10', 10));
console.log(parseInt('99px', 10));

Результат:

10
99

Но parseInt() умеет работать и с другими системами счисления. Например, с двоичной:

console.log(parseInt('101', 2));

Результат:

5

Строка ‘101’ в двоичной системе означает число 5 в привычной десятичной системе.

Для первых задач это обычно не нужно. Достаточно привыкнуть к записи parseInt(value, 10).

Чем отличается от Number()

Number() и parseInt() оба помогают получить число, но работают по-разному.

Number() требует, чтобы вся строка была похожа на число.

console.log(Number('120'));
console.log(Number('120px'));

Результат:

120
NaN

Строка ‘120px’ не является обычным числом, поэтому Number() возвращает NaN.

parseInt() в такой ситуации ведет себя мягче: он берет число из начала строки и останавливается перед лишними символами.

console.log(parseInt('120', 10));
console.log(parseInt('120px', 10));

Результат:

120
120

Поэтому parseInt() удобно использовать для строк вроде ‘16px’, ‘50%’, ‘10 минут’, если нам нужно именно число в начале строки.

parseInt() и дробные числа

parseInt() возвращает целое число. Если в строке есть дробная часть, она просто отбрасывается.

console.log(parseInt('10.9', 10));
console.log(parseInt('10.1', 10));
console.log(parseInt('10.999px', 10));

Результат:

10
10
10

Это не округление. Функция не смотрит, какая цифра стоит после точки. Она читает целую часть и останавливается на точке.

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

console.log(parseFloat('10.9px'));
console.log(Number('10.9'));

Результат:

10.9
10.9

parseInt() и prompt()

prompt() всегда возвращает строку. Если пользователь должен ввести целое число, результат можно преобразовать через parseInt().

let age = prompt('Сколько вам лет?');
let numberAge = parseInt(age, 10);

console.log(numberAge);
console.log(typeof numberAge);

Если пользователь введет 18, в переменной numberAge будет уже число.

Можно записать короче:

let age = parseInt(prompt('Сколько вам лет?'), 10);

console.log(age);

Но для начала вариант в две строки понятнее. Сначала получаем значение от пользователя, потом отдельно преобразуем его в число.

Если пользователь введет 18 лет, parseInt() все равно получит число 18:

let age = parseInt('18 лет', 10);

console.log(age);

Результат:

18

Это удобно, но важно понимать поведение функции. Иногда такая мягкость помогает, а иногда лучше требовать от пользователя строгое число без лишнего текста.

Когда получится NaN

parseInt() возвращает NaN, если не смог найти число в начале значения.

console.log(parseInt('JavaScript', 10));
console.log(parseInt('px120', 10));
console.log(parseInt('', 10));

Результат:

NaN
NaN
NaN

В первом примере строка начинается с буквы, во втором - тоже не с числа, в третьем строка пустая. Поэтому получить целое число не получилось.

Пробелы в начале не мешают, но если после пробелов нет числа, результат тоже будет NaN.

console.log(parseInt('   ', 10));
console.log(parseInt('   text', 10));

Результат:

NaN
NaN

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

Когда не стоит использовать parseInt()

parseInt() хорошо подходит, когда нужно взять целое число из начала строки. Но это не замена всем способам преобразования в число.

Если нужна дробная часть, лучше использовать parseFloat() или Number().

console.log(parseInt('19.95', 10));
console.log(parseFloat('19.95'));

Результат:

19
19.95

Если нужно округлить число, используем не parseInt(), а методы округления.

console.log(Math.round(19.95));
console.log(Math.floor(19.95));
console.log(Math.ceil(19.05));

Результат:

20
19
20

Если нужно убедиться, что вся строка является числом, parseInt() тоже может быть слишком мягким.

console.log(parseInt('100px', 10));
console.log(Number('100px'));

Результат:

100
NaN

parseInt() взял число 100 и проигнорировал px. Если такое поведение не подходит, лучше использовать более строгую проверку.

Итого

parseInt() помогает получить целое число из начала строки. Он пропускает пробелы, учитывает знак + или -, читает цифры и останавливается на первом неподходящем символе.

В обычных десятичных числах вторым аргументом лучше указывать 10:

parseInt(value, 10);

Главное запомнить: parseInt() не округляет дробные числа, не проверяет всю строку целиком и возвращает NaN, если число не найдено в начале значения.