 # Numberize a value

Thursday, 4 March 2021

This article is more than a year old and the information in it may be out of date.

If you get a CSS value but you want to do maths with it, what do you do?

``````const width = window.getComputedStyle(document.body, null).getPropertyValue('width'); // 960px
document.body.style.width = (width / 2); // NaN
``````

Oh noes! 😖

I guess we could use the CSS `calc()` syntax…

``````document.body.style.width = `calc(\${width} / 2)`; // <body style="width: calc(960px / 2);">
``````

This is all well and good for simple calculations like that but what happens when we start getting spicy?

``````const padding = window.getComputedStyle(document.body, null).getPropertyValue('padding'); // 8px
const margin = window.getComputedStyle(document.body, null).getPropertyValue('margin'); // 32px
document.body.style.width = `calc(calc(\${width} / 2) + calc(\${padding} + calc(\${margin} * 0.5))`;  // <body style="width: calc(calc(960px / 2) + calc(8px + calc(32px * 0.5)));">
``````

Ew! Gross! 🤮

What you actually want is to be able to treat that string like a real number, right?

## Make that string an integer

A fun quirk/feature of JavaScript is that `parseInt()` and `parseFloat()` can be used on any string that starts with a number and it will just magically work!

``````document.body.style.width = (parseInt(width, 10) / 2) + (parseInt(margin, 10) * 0.5) + parseInt(padding, 10) + 'px'; // <body style="width: 504px;">
``````

The magic here is JavaScript's Type Inference - it's doing a lot of the heavy lifting in assuming that - because you're "parsing an integer" - the string passed is an integer.

Again, this works but I, for one, don't like things to run off assumptions. And, no, rewriting the application in TypeScript isn't going to happen, Reply Guy!

## Make that string definitely an integer

If you just want the code, here you are…

``````const numberizeValue = (input) => parseFloat(input.split('').filter(x => !x.match(/[0-9.]/g)).join(''), 10);
``````

### Now, let's break that down!

Firstly, we're going to use `parseFloat()` because it will allow us to "numberize" numbers with decimal places. We're going to assume our numbers are decimal and return the result using Base 10.

Next, we explode the provided string into an array with `input.split('')`. The use of `''` gives us an array of individual characters.

We can now filter the array to remove any characters that are not numbers using `.filter(x => !x.match(/[0-9.]/g)`. The RegEx in the `match` function is looking for decimal numbers between 0 and 9, and the full-stop/period character.

Now the array has been stripped of letters and (most) punctuation, we can `join` the array back into a string to be parsed. Cover image courtesy of Mika Baumeister.

Fin 