# 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