# How to show 18 decimals token balance in readable format?

I have number which has 18 decimal points. I want to get the digits before the decimal points in a variable and the digits after the decimals in another variable.

Let's say the original variable value is 100,

I want to show that like this `100.000000000000000000` but now I am getting `100000000000000000000` (without decimal point)

I am trying to print the digits before the decimal points in a HTML element and the rest in another HTML

``````<div class="original"></div>

var original = data['result'];
\$(".original").html(original]);
``````

This prints `100000000000000000000` in the element original and that's fine.

Now I want to print the digits before the decimal points in a HTML element 'beforeDecimal' and point then the rest

So my mark up is:

``````<div class="beforeDecimal"></div> . <div class="afterDecimal"></div>

var beforeDecimal = data['result']; // how do I have to change this ?
\$(".beforeDecimal").html(beforeDecimal]);

var afterDecimal = data['result']; // how do I have to change this ?
\$(".afterDecimal").html(afterDecimal]);
``````

if I use `var beforeDecimal = parseFloat(data['result']).toFixed(4);` is shows `100.00000000000e+21` but I want `100 . 000000000000000000`

How can I do this?

• Divide by 10^18? – user19510 Jan 3 '18 at 15:59
• I do not understand.. – Riffaz Starr Jan 3 '18 at 16:00
• If you had the number 1234 and wanted to convert it to 1.234, you would divide by 1000. This is the same, but there are 18 zeros instead of 3. – user19510 Jan 3 '18 at 16:01
• oh... yes,, that works... If I divide it by 10^18 I get the exact amount of token balance.. but I am trying to style all the digits after the DOT Actually all the digits after the DOT should be in smaller fonts. so 1 should be 10 px and 234 in 3px font size in your example.. how can I do that?? – Riffaz Starr Jan 3 '18 at 16:44
• You need to first divide by 10^18. I thought we were already past that step. – user19510 Jan 3 '18 at 17:00

All you need just to handle simple arithmetic operations on big numbers.

## part 1: big numbers library

According to official documentation, `web3.js` utilizes bn.js library (same lib on github) for handling big numbers. If you are already using `web3.js` library (which is most likely), you have nothing to do, just move to next part;)

Otherwise, it is possible to load the library right to your page in the `<script>` tag:

``````<script src="https://unpkg.com/bn.js@4.11.8/lib/bn.js"></script>
``````

Yes, I know, there are webpack/parcel/browserify, but such instructions will make my answer much longer

## part 2: calculations

Now you need to convert wei balance (`100000000000000000000`) to the user-readable format. All we need just apply `div` and `mod` functions to weiBalance and decimals (`18` in this case):

``````//// use the appropriate BN loading approach:
//// 1: from web3
// const BN = web3.utils.BN
//// 2: OR using <script>: no additional steps, BN already is global

// REMOVE THIS LINE FROM YOUR CODE
// required just for representative output of this example:
data['result'] = '31415926500000000000'

const balanceWeiString = data['result']
const balanceWeiBN = new BN(balanceWeiString)

const decimals = 18
const decimalsBN = new BN(decimals)
const divisor = new BN(10).pow(decimalsBN)

const beforeDecimal = balanceWeiBN.div(divisor)
const afterDecimal  = balanceWeiBN.mod(divisor)

console.log(beforeDecimal.toString())    // >> 31
console.log(afterDecimal.toString())     // >> 415926500000000000
``````

I used many variables in my example, but it is just for readability purposes.

## be aware of float

The usage of `float` when dealing with big numbers can cause the loss of precision:

1. example 1
2. example 2: `0.1 * 0.2 = 0.020000000000000004`
• Very helpful - I appreciate your sharing of your findings :-) – Juergen Fink Mar 28 '18 at 0:22