Comprehensive Guide to Numbro for Effective Number Formatting

Welcome to the Comprehensive Guide to Numbro

Numbro is a powerful JavaScript library for formatting and manipulaing numbers. It is especially useful for applications that require number parsing, formatting, and localization. In this article, we will explore various APIs provided by Numbro with practical code snippets.

Installation


npm install numbro

Basic Usage


<script src="path/to/numbro.min.js"></script>
<script>
  numbro().format('0,0');
</script>

Formatting Numbers

Numbro can format numbers in various ways:


numbro(123456789).format('0,0');          // '123,456,789'
numbro(1234.567).format('0,0.00');        // '1,234.57'
numbro(0.123).format('0.0%');             // '12.3%'
numbro(1.23).format('$0,0.00');           // '$1.23'

Unformatting Strings


numbro.unformat('10,000.00');             // 10000
numbro.unformat('($10,000.00)');          // -10000

Custom Formatting


numbro(123456789).format({
  mantissa: 2
}); // '123,456,789.00'

Manipulating Numbers


var num = numbro(1000);
num.add(100).multiply(2).subtract(300);    // 1800

Localizations

Numbro supports multiple locales. Setting and using localizations is simple:


numbro.setLanguage('fr-FR');
numbro(10000).formatCurrency();           // '10,000,00 €'

Application Example

Here is a basic example of a web application that uses Numbro to format numbers:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Numbro Example</title>
  <script src="path/to/numbro.min.js"></script>
</head>
<body>
  <h1>Number Formatter</h1>
  <input type="text" id="numberInput" placeholder="Enter a number">
  <button onclick="formatNumber()">Format</button>
  <p id="formattedNumber"></p>

  <script>
    function formatNumber() {
      var input = document.getElementById('numberInput').value;
      var formatted = numbro(input).format('0,0.00');
      document.getElementById('formattedNumber').innerText = formatted;
    }
  </script>
</body>
</html>

By understanding these APIs, you can efficiently work with numbers in your web applications using Numbro.

Hash: 91e9c350b9d7e0598459491c5deb17c53341815c5ab9f5446c7bfeeab5e6f9ec

Leave a Reply

Your email address will not be published. Required fields are marked *