Number.parseInt()
Parses a leading integer out of a string, in a base you choose.
Number.parseInt(string)
Number.parseInt(string, radix)- Added in JavaScript ES2015
Parameters
| Parameter | Type | Description |
|---|---|---|
$string | string | The value to parse, coerced to a string. Leading whitespace is ignored. |
$radixoptional | number= 10 | An integer between 2 and 36 giving the base of the numeral system. If undefined or 0, base 10 is assumed, except when the string begins with 0x or 0X, in which case 16 is assumed. |
Return value
numberAn integer parsed from the given string, or NaN if the radix is outside 2–36 or the first non-whitespace character cannot begin a number in that base.
Changelog
- PHP ES2015Added as a static method on Number; it is the very same function object as the global parseInt, so Number.parseInt === parseInt is true.
- PHP ES5Leading zeros no longer imply octal. In older engines parseInt('08') could return 0; it is now 8.
Number.parseInt() and the global parseInt() are literally the same function — Number.parseInt === parseInt is true. The Number version exists so the global namespace is not the only way to reach it, which matters in module-oriented code.
It stops at the first character it cannot use
This is the defining behaviour, and it cuts both ways. parseInt('42px') is 42, which is exactly what you want when reading a CSS length. parseInt('1e3') is 1, because e is not a digit in base 10 — surprising if you expected 1000. And parseInt('12.9') is 12: it truncates rather than rounds, and never continues past the decimal point.
Always pass the radix
Without it, a string starting 0x is read as hexadecimal, so parseInt('0x1f') is 31. Passing 10 explicitly makes the intent unambiguous and protects against user input that happens to start with those two characters.
Choosing between this and Number()
Use parseInt() when trailing junk is expected and should be ignored; use Number(str) when the whole string must be numeric, since it returns NaN for '42px'. Check the result with Number.isNaN() either way.
Example
When to use it
- Read a pixel value out of a CSS length string
- Convert a hexadecimal colour component to a number
- Pull a leading version number out of a tag like "3-beta"
Frequently asked questions
Is Number.parseInt() different from the global parseInt()?
No. They are the same function object — Number.parseInt === parseInt evaluates to true. The static form exists purely to reduce reliance on globals.
Why does parseInt('1e3') return 1?
Base-10 parsing stops at the first character that is not a digit, and 'e' is not one. Use Number('1e3') or Number.parseFloat('1e3') to get 1000.
Do I still need to pass the radix?
Yes. Without it, strings beginning 0x or 0X are read as hexadecimal, so parseInt('0x1f') is 31 rather than 0. Passing 10 makes the intent explicit.
More examples
parseInt versus Number
parseInt() tolerates trailing text but rejects empty strings; Number() demands the whole string be numeric but treats blank input as zero. Pick the one whose failure mode you want.
const inputs = ['42', '42px', '', ' ', '1e3', '0.9'];
for (const s of inputs) {
console.log(JSON.stringify(s), Number.parseInt(s, 10), Number(s));
}
// "42" 42 42
// "42px" 42 NaN
// "" NaN 0
// " " NaN 0
// "1e3" 1 1000
// "0.9" 0 0.9The radix argument in a callback
Passing parseInt directly to map is a classic bug: the array index arrives as the radix. Wrap it in an arrow function that pins base 10.
// map passes (value, index) — the index becomes the radix
console.log(['10', '10', '10'].map(parseInt)); // [10, NaN, 2]
// Radix 0 is treated as 10, radix 1 is invalid, radix 2 gives binary
console.log(['10', '10', '10'].map((s) => Number.parseInt(s, 10))); // [10, 10, 10]Parsing across bases
parseInt() with a radix is the exact inverse of toString() with the same radix, which makes the pair reliable for compact encodings.
const rows = [['ff', 16], ['1010', 2], ['777', 8], ['zz', 36]];
for (const [text, radix] of rows) {
const n = Number.parseInt(text, radix);
console.log(text, 'base', radix, '=>', n, '| back:', n.toString(radix));
}
// ff base 16 => 255 | back: ff
// 1010 base 2 => 10 | back: 1010
// 777 base 8 => 511 | back: 777
// zz base 36 => 1295 | back: zz
Discussion