Yogesh Chavan

Yogesh Chavan

Best Way Format And Manipulate Numbers In JavaScript

Best Way Format And Manipulate Numbers In JavaScript

Subscribe to my newsletter and never miss my upcoming articles

Today we will see a very popular and easy-to-use library that allows us to convert and manipulate numbers.

Many times we need to display numbers like 1400 to 1.4k, 1000000 to 1M which may be numbers of views, likes or comments.

Sometimes we need to add commas in long numbers to easily understand it.

It's very difficult to handle all the scenarios ourselves.

So to make our task easier there is a library known as Numeral.

Let's understand how to use it.

There are two ways of using it.

  • include the CDN in a script tag
  • install it as an npm package

We will use the second way of npm.

To install the package, execute the following command:

npm install numeral

OR

yarn add numeral

Import the library

import numeral from "numeral"; // ES6

OR

const numeral = require('numeral'); // Nodejs

Get the number in comma-separated format

const commaSeparated = numeral(50000).format("0,0");

console.log(commaSeparated); // 50,000

Get the number in k(thousand), m(million) format

const kFormatted = numeral(23000).format("0a");
const mFormatted = numeral(1230974).format("0.000a");

console.log(kFormatted); // 23k
console.log(mFormatted); // 1.321m

Get the numbers in the ordinal format

const ordinal = numeral(23).format("0o");

console.log(ordinal); // 23rd

Get the number in MB, GB format

const bytes = numeral(2348895676).format("0.00b");
console.log(bytes); // 2.35GB

Get the number in exponential format

const exponential = numeral(676565765722).format("0,0e+0");
console.log(exponential); // 7e+11

To explore other formats and examples visit http://numeraljs.com/.

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will build 3 apps along with a food ordering app and you'll learn:

  • Basic and advanced Redux
  • How to manage the complex state of array and objects
  • How to use multiple reducers to manage complex redux state
  • How to debug Redux application
  • How to use Redux in React using react-redux library to make your app reactive.
  • How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Interested in reading more such articles from Yogesh Chavan?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this