Monday, 11 March, 2019 UTC
Summary
Introduction
Managing data is one of the fundamental concepts of programming. Converting a Number to a String is a common and simple operation. The same goes for the other way around, converting a String to a number.
Converting String to Number
As with the previous shown methods, JavaScript also provides functions to easily transform a String to a primitive number. These are
parseInt(), parseFloat(), Number(), Math.floor(), Math.ceil(), Unary Operator / Multiply by 1..parseInt()
.parseInt() takes a String as a first argument, and a base to which that String will be converted to. This method always returns an integer.The base can be defined by adding prefixes to the numbers we want to parse:
- No prefix - If there isn't a prefix, the radix is 10 (decimal).
- 0 - If the prefix is
0, then the radix is 8 (octal). Though, this feature is deprecated. - 0x - If the prefix is
0x, then the radix is 16 (hexadecimal).
Although, we can simply add an optional argument to the method call, defining the base:
let str = '353';
let fltStr = '353.56';
let binStr = '7';
let nanStr = 'hello';
parseInt(str); // 353
parseInt(fltStr); // 353
parseInt(binStr, 2); // 111 (Binary)
parseInt(nanStr); // NaN (Not a Number)
.parseFloat()
.parseFloat() takes a String as an argument, and returns the Float point number equivalent:let str = '100';
let fltStr = '100.21';
let nanStr = 'bye';
parseFloat(str); // 353
parseFloat(fltStr); // 353.21
parseFloat(nanStr); // NaN
Math.floor()
Math.floor() is used to round an integer or floating point number. It returns the nearest integer rounded down. Though, surprisingly, this method can also accept Strings, making it yet a way to convert a String to an integer:let str = '100';
let fltStr = '99.89';
let nanStr = 'bye';
Math.floor(str); // 100
Math.floor(fltStr); // 99
Math.floor(nanStr); // NaN
Math.ceil()
Very similar to the previous method,
Math.ceil() can be used to round an integer or floating point number. Though, this time it returns the nearest integer rounded up.The method can accept Strings, also making it a way to convert a String to a number:
let str = '100';
let fltStr = '100.21';
let nanStr = 'bye';
Math.ceil(str); // 100
Math.ceil(fltStr); // 101
Math.ceil(nanStr); // NaN
Keep in mind that if you're needing to parse floats then both
Math.floor and Math.ceil are probably not good options since they'll always convert the strings to the nearest integer equivalent.Unary Operator
As with Concatenating an Empty String, there is also a workaround that has better performance but lacks readability.
By adding a
+ sign before a String, it will be converted into a number if it follows the right format:let str = '100';
let fltStr = '100.21';
let nanStr = 'greetings';
+str // 100
+fltStr // 100.21
+nanStr // NaN
+'1000' // 1000
+10.25 // 10.25
While concise and effective, this isn't a very well-known feature of JavaScript, so it's not advised to use since it may make your code not as easy to understand.
Multiplying by 1
If a String is multiplied by the primitive number
1, the desired effect can be achieved as well.This approach is arguably the fastest one:
let str = '100';
let fltStr = '100.21';
let nanStr = 'greetings';
str * 1; // 100
fltStr * 1; // 100.21
nanStr * 1; // NaN
'2000' * 1; // 2000
'102.15' * 1; // 102.15
The previous two approaches work simply due to the fact that JavaScript tries to assimilate the data-types used in a statement such as addition or multiplication.
Using String and Number Objects
Another way of transforming a String to number or a number to String is creating a new String or Number object with the
new keyword.// Number to String
let numToStr = new String(2); // String {'2'}
// String to Number
let strToNum = new Number('2'); // Number {2}
This practice is, however, discouraged. When using primitive data the object methods should not be used to create them.
Conclusion
There are many valid ways of manipulating data. It is up to the programmer to decide which one they prefer, choosing performance over readability or a balance between the two.
For more information, you can read the following resources:
- parseInt
- parseFloat
- Math.floor
- Math.ceil