Borislav Hadzhiev
Thu Feb 17 2022ยท4 min read
Photo by Julian Bialowas
Use the Number()
object to convert a string to a number in TypeScript, e.g.
const num1 = Number(str)
. When used as a function, Number(value)
converts a
string or other value to a number. If the value cannot be converted, it returns
NaN
(not a number).
const str = '1234'; // ๐๏ธ const num1: number const num1 = Number(str); console.log(num1); // ๐๏ธ 1234 // ๐๏ธ const num2: number const num2 = +str; console.log(num2); // ๐๏ธ 1234
We used the Number function to convert a string to a number.
You might also see developers use the unary plus (+) operator to convert a string to a number.
const str = '1234'; const num2 = +str; console.log(num2); // ๐๏ธ 1234
It achieves the same goal as the Number
function, but might be confusing to
readers of your code who are not familiar with the unary plus (+) operator.
You should avoid using the unary plus (+) operator when adding numbers because it makes your code look quite strange.
const str = '1234'; const num2 = 6 + +str; console.log(num2); // ๐๏ธ 1240
The first plus is the addition operator and the second one is used to convert the string to a number.
number
.Even if you pass a string that doesn't store a valid number to the Number
function, you would get NaN
(not a number) value back, which is also of type
number
.
console.log(typeof NaN); // ๐๏ธ "number"
If you try to convert a string that is not a valid number to a number using the
Number
function or the unary plus (+) operator, you would get a NaN
(not a
number) value back.
const str = '1234test'; const num1 = Number(str); console.log(num1); // ๐๏ธ NaN const num2 = +str; console.log(num2); // ๐๏ธ NaN
In this scenario, you should be using the parseInt()
or parseFloat()
functions.
Like the names of the functions suggest, parseInt
converts a string to an
integer, whereas parseFloat
to a floating point number.
Use the parseInt()
function to convert a string to a number, e.g.
const num1 = parseInt(str)
. The parseInt
function takes the value to parse
as a parameter and returns an integer parsed from the provided string.
const str = '1234.5test'; // ๐๏ธ const num1: number const num1 = parseInt(str); console.log(num1); // ๐๏ธ 1234 // ๐๏ธ const num2: number const num2 = parseFloat(str); console.log(num2); // ๐๏ธ 1234.5
The only parameter we passed to the parseInt function is the string we want to convert to an integer.
The second example uses the parseFloat function to convert a string to a floating point number.
TypeScript is able to infer the type of the variables to be numbers because even
the type of NaN
is a number
.
It should be noted that if the first non-whitespace character of the string
cannot be converted to a number, the parseInt()
and parseFloat()
functions
would return NaN
(not a number).
const str = 'test1234.5test'; const num1 = parseInt(str); console.log(num1); // ๐๏ธ NaN const num2 = parseFloat(str); console.log(num2); // ๐๏ธ NaN
The parseInt()
and parseFloat()
functions are able to parse a number from a
string, if the string starts with a valid number, however if the first
non-whitespace character of the string cannot be converted to a number, the
methods short-circuit returning NaN
.
If this is the situation you're in, you need to extract a number from a string
using the replace()
method.
To extract a number from a string in TypeScript, call the replace()
method,
e.g. str.replace(/\D/g, '')
and pass the result to the Number()
function.
The replace
method will replace all non-digit characters with an empty string
and return the result.
const str = 'hello 1234 world'; // ๐๏ธ const replaced: string const replaced = str.replace(/\D/g, ''); console.log(replaced); // ๐๏ธ "1234" let num: number | undefined; if (replaced !== '') { num = Number(replaced); } // ๐๏ธ let num: number | undefined console.log(num); // ๐๏ธ 1234
The example uses the String.replace method to replace all non-digit characters in the string with an empty string.
This effectively removes all non-digit characters from the string.
Converting an empty string to a number returns 0
, which might not be what you
want.
// ๐๏ธ 0 console.log(Number(''));
This is why we set the type of the num
variable to number | undefined
and
we're only setting the variable to a number if the replaced
variable does not
store an empty string.
If you are sure that the string in your application will contain at least one
number, or your use case is ok with converting an empty string to 0
, you can
simplify this a bit.
const str = 'hello 1234 world'; // ๐๏ธ const replaced: string const replaced = str.replace(/\D/g, ''); console.log(replaced); // ๐๏ธ "1234" // ๐๏ธ const num: number const num = Number(replaced); console.log(num); // ๐๏ธ 1234
The first parameter we pass to the replace()
method is a regular expression
that we want to match in the string and the second parameter is the replacement
for each match (an empty string).
The \D
character matches a character that is NOT a digit.
We have added the g
(global) flag to match all non-digit characters and
replace them with an empty string.
String.replace
method would return an empty string.String.replace
method returns a new string, it does not mutate the original string. Strings are immutable in JavaScript.You should only be using this approach if the parseInt()
and parseFloat()
functions are insufficient as it is always better to leverage built-in functions
when possible.