How to Format And Manipulate Numbers In JavaScript

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.

Best Way Format And Manipulate Numbers In JavaScript

Comments

More from this blog

How to Build a Task Management App Using Next.js 16 and Prisma 7

React's/Next.js Worst Week Ever! Just Got Worse

React Performance Anti-Patterns: 5 Mistakes That Kill Your App's Speed!

How to Access Both Company and Personal GitHub Repositories On The Same Machine

How to Build Multi-Language React Apps with Internationalization (i18n)

Import the library

Get the number in comma-separated format

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

Get the numbers in the ordinal format

Get the number in MB, GB format

Get the number in exponential format

Thanks for reading!

Command Palette

Comments

More from this blog

Import the library

Get the number in comma-separated format

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

Get the numbers in the ordinal format

Get the number in MB, GB format

Get the number in exponential format

Thanks for reading!