DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Newsletter
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Related

  • Mastering React Efficiency: Refactoring Constructors for Peak Performance
  • Buh-Bye, Webpack and Node.js; Hello, Rails and Import Maps
  • What Is useContext in React?
  • How to Format a Number as Currency in JavaScript

Trending

  • DuckDB for Python Developers
  • LangChainGo vs Genkit Go: Where Genkit Shines
  • Event Sourcing in Distributed Systems: Architecture, Consistency, and Fault-Tolerant Projections
  • Part 2: Securing and Scaling Goose-to-Java Agent Traffic With agentgateway

Draft This article hasn't been published, so readers can't see it.

In moderation This article is waiting for review, so readers can't see it yet.

Deleted This article has been deleted, so readers can't see it.

  1. DZone
  2. Coding
  3. JavaScript
  4. Format and Manipulate Numbers With Numeral.js

Format and Manipulate Numbers With Numeral.js

It's not as easy to manipulate numbers in JavaScript as it is in other languages. Learn how to use Numeral.js, a JavaScript library, to get the job done.

By 
Swathi Prasad
·
May. 13, 17 · Tutorial
Post on X (opens in a new tab) Share on LinkedIn (opens in a new tab)
16.2K Views

Join the DZone community Save articles, join the discussion, and download Refcards and Trend Reports with a free account.

Join for free Already a member? Log in

Often it is required that numbers be displayed in a formatted way, such as adding comma separations in long numeric values, plain old numbers with decimal places, percentages, and so on. JavaScript doesn’t come with vast formatting options like most other high level languages.

I recently found out about Numeral.js, a JavaScript library for formatting and manipulating numbers. It also allows you to add local and custom formats.

Usage

Download the library from GitHub or link it using CDNJS. Alternatively, you can do “npm install numeral.”

Once you have added the dependency, create an instance of numeral. The constructor takes numbers or strings.

let testNumeral = numeral(10000);

testNumeral.format('0,0');

>> 10,000

Converting to Currency

testNumeral = numeral(10000);

testNumeral.format('$0,0.00');

>> $10,000.00


Converting to Bytes

testNumeral = numeral(1024);

testNumeral.format(' 0b');

//1KB

Numeral.js is a great library and easy to use. If you want to learn more about it, check out the website for documentation and examples.

JavaScript library JavaScript

Published at DZone with permission of Swathi Prasad. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Mastering React Efficiency: Refactoring Constructors for Peak Performance
  • Buh-Bye, Webpack and Node.js; Hello, Rails and Import Maps
  • What Is useContext in React?
  • How to Format a Number as Currency in JavaScript

Partner Resources

×

Comments

Loading comments

The comments didn't load

Please try again in a moment.

Likes

Loading

The next likes didn't load. Please try again.

The likes didn't load

Please try again in a moment.

See who liked this

Log in or join DZone for free to see who liked this article.

Log in Join for free
  • RSS
  • X
  • Facebook

ABOUT US

  • About DZone
  • Support and feedback
  • Community research

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 215
  • Nashville, TN 37211
  • [email protected]

Let's be friends:

  • RSS
  • X
  • Facebook