Comprehensive Guide to numbro – A Powerful JavaScript Library for Number Formatting
numbro is a JavaScript library that provides formatting and manipulating functionalities for numbers, including support for thousands of locales and dozens of formatting options. This guide will introduce you to the numbro library and its various APIs with code snippets.
Installation
// Using npm
npm install numbro
// Using yarn
yarn add numbro
Loading and Using numbro
To start using numbro, first import it into your JavaScript file:
const numbro = require('numbro');
Basic Formatting
Simple number formatting using numbro:
console.log(numbro(10000).format('0,0')); // Output: "10,000"
Custom Formatting
You can also format numbers with custom patterns:
console.log(numbro(1234567.89).format('0,0.00')); // Output: "1,234,567.89"
console.log(numbro(1234567.89).format('$0,0.00')); // Output: "$1,234,567.89"
console.log(numbro(1234567.89).format('($ 0,0.00)')); // Output: "$ 1,234,567.89"
Percentage Formatting
Formatting numbers into percentages:
console.log(numbro(0.974878234).format('0.00%')); // Output: "97.49%"
Byte Formatting
console.log(numbro(1024).format('0b')); // Output: "1KiB"
console.log(numbro(1024).format('0 ib')); // Output: "1 Kibibyte"
Binary Formatting
console.log(numbro(1024).binaryFormatter()); // Output: '10000000000'
Language/Locale Support
numbro supports multiple language formats:
const numbro = require("numbro");
require("numbro/dist/languages.min");
numbro.setLanguage('de-DE');
console.log(numbro(10000).format('0,0')); // "10 000"
Example Application
Below is an example of a small web application that utilizes numbro to format user-input numbers:
<!DOCTYPE html>
<html>
<head>
<title>numbro Example</title>
<script src="https://unpkg.com/numbro/dist/numbro.min.js"></script>
</head>
<body>
<h2>numbro Formatting Example</h2>
<input type="number" id="numberInput" placeholder="Enter a number" />
<button onclick="formatNumber()">Format Number</button>
<p id="formattedNumber"></p>
<script>
function formatNumber() {
const input = document.getElementById('numberInput').value;
const formatted = numbro(input).format('0,0.00');
document.getElementById('formattedNumber').innerText = formatted;
}
</script>
</body>
</html>
By utilizing numbro in your projects, you benefit from powerful number formatting features, language support, and ease of use with various formatting specifications.
If you encounter any issues, consult the official numbro documentation.
Hash: 91e9c350b9d7e0598459491c5deb17c53341815c5ab9f5446c7bfeeab5e6f9ec
