Convert from string
to số
, this you have done many times, right? There are quite a few ways to convert such as:
- parseInt (x)
- parseFloat (x)
- Number (x)
- + x
- ~~ x
You may be familiar with parseInt
, parseFloat
, Number
and their names clearly show what they do. The unary plus
and Bitwise NOT
(double tilde ~~
) are rarely used by us.
Let’s find out about the difference when convert
strings into numbers of 5 ways above
1. Type of the conversion
Convert type
1 2 3 4 5 6 | <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">"1.3"</span> <span class="token punctuation">)</span> <span class="token comment">// 1</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">"1"</span> <span class="token punctuation">)</span> <span class="token comment">// 1</span> |
The most obvious difference is the type of result returned by each way. parseInt
will always convert to an Integer
.
Using ~~
will always return an Integer
1 2 3 4 5 6 | <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"1.0"</span> <span class="token comment">// 1</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"1.3"</span> <span class="token comment">// 1</span> |
parseFloat
, +
and the Number
function will return Integer
if possible, and will return Float
in the remaining cases.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">"1.0"</span> <span class="token punctuation">)</span> <span class="token comment">// 1</span> <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">"1.4"</span> ' <span class="token punctuation">)</span> <span class="token comment">// 1.4</span> <span class="token function">parseFloat</span> <span class="token punctuation">(</span> <span class="token string">"1.0"</span> <span class="token punctuation">)</span> <span class="token comment">// 1</span> <span class="token function">ParseFloat</span> <span class="token punctuation">(</span> <span class="token string">"1.4"</span> <span class="token punctuation">)</span> <span class="token comment">// 1.4</span> <span class="token operator">+</span> <span class="token string">"1.0"</span> <span class="token comment">// 1</span> <span class="token operator">+</span> <span class="token string">"1.4"</span> <span class="token comment">// 1.4</span> |
2. Type of the operand
All of the above can accept a string as input. But what if its input is not a string?
parseInt
and parseFloat
will always return NaN
for any non- string
input
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// NaN</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// NaN</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// NaN</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// NaN</span> |
Number
, +
and ~~
can convert
boolean
values, return 1 if input is true
, 0 if input is false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token comment">// 1</span> <span class="token operator">+</span> <span class="token boolean">true</span> <span class="token comment">// 1</span> <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token comment">// 0</span> <span class="token operator">+</span> <span class="token boolean">false</span> <span class="token comment">// 0</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token boolean">true</span> <span class="token comment">// 1</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token boolean">false</span> <span class="token comment">//0</span> |
and they will return 0
for null
1 2 3 4 5 6 7 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token comment">// 0</span> <span class="token operator">+</span> <span class="token keyword">null</span> <span class="token comment">// 0</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token keyword">null</span> <span class="token comment">// 0</span> |
When the input value is undefined
, Number
and +
will return NaN
and ~~
will describe 0
3. Invalid conversions
When the input data is incorrect (wrong format), we will see more than the difference between the above.
parseInt and parseFloat will convert as much as possible, until they find an unverified element.
1 2 3 4 5 6 | <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">"2.3test45"</span> <span class="token punctuation">)</span> <span class="token comment">// 2</span> <span class="token function">parseFloat</span> <span class="token punctuation">(</span> <span class="token string">"2.3test45"</span> <span class="token punctuation">)</span> <span class="token comment">// 2.34</span> |
Number
and +
will return NaN
if the input cannot be converted. As always, ~~
returns an integer – 0
.
The way each operation deals with an empty string is also interesting. All return 0 except parseInt and parseFloat return NaN. It is interesting to convert an empty string. parseInt
and parseFloat
will return NaN
and the rest will return 0
1 2 3 4 5 6 7 8 9 10 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token comment">// 0</span> <span class="token operator">+</span> <span class="token string">''</span> <span class="token comment">// 0</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">""</span> <span class="token comment">// 0</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">""</span> <span class="token punctuation">)</span> <span class="token comment">// NaN</span> |
4. Exponents, hex and other bases
parseInt
has a nice feature, when you can pass more parameters to the hệ
(base) as the second argument. The default is base 10
1 2 3 4 5 6 | <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token number">16</span> <span class="token punctuation">)</span> <span class="token comment">// 10</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">'11'</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token comment">// 3</span> |
As for Number
, +
and ~~
: it doesn’t work
1 2 3 4 5 6 7 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token number">16</span> <span class="token punctuation">)</span> <span class="token comment">// NaN</span> <span class="token operator">+</span> <span class="token string">"a"</span> <span class="token comment">// NaN</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"a"</span> <span class="token comment">// NaN</span> |
On the other hand, parseInt
cannot convert strings with exponential notation, while all other ways are possible. More precisely, parseInt
will stop at a character that is not the first number, returning unexpected results:
1 2 3 4 5 6 7 8 9 | <span class="token operator">+</span> <span class="token string">"2e3"</span> <span class="token comment">// 2000</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"2e3"</span> <span class="token comment">// 2000</span> <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">"2e3"</span> <span class="token punctuation">)</span> <span class="token comment">// 2000</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">"2e3"</span> <span class="token punctuation">)</span> <span class="token comment">// 2</span> |
Unlike the exponent, parseInt
works correctly with base-8 system:
1 2 3 4 5 6 7 8 9 | <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token string">"0xa"</span> <span class="token punctuation">)</span> <span class="token comment">// 10</span> <span class="token operator">+</span> <span class="token string">"0xa"</span> <span class="token comment">// 10</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"0xa"</span> <span class="token comment">// 10</span> <span class="token function">parseInt</span> <span class="token punctuation">(</span> <span class="token string">"0xa"</span> <span class="token punctuation">)</span> <span class="token comment">// 10</span> |