JavaScript Number Methods — JavaScript Tutorial

Working with Numbers

JavaScript provides methods for converting and formatting numbers.

These methods help you work with numeric data effectively.

Example

// Converting to Numbers
Number('123');      // 123
parseInt('123');    // 123
parseFloat('123.45'); // 123.45
parseInt('123px');  // 123 (stops at non-digit)

// Checking Numbers
Number.isNaN(NaN);        // true
Number.isFinite(100);     // true
Number.isInteger(100);    // true
Number.isInteger(100.5);  // false

// Formatting Numbers
const num = 123.456789;
num.toFixed(2);        // '123.46' (2 decimals)
num.toPrecision(4);    // '123.5' (4 significant digits)
num.toExponential(2);  // '1.23e+2'

// Number Constants
Number.MAX_VALUE;      // Largest number
Number.MIN_VALUE;      // Smallest positive number
Number.POSITIVE_INFINITY;
Number.NEGATIVE_INFINITY;
Number.NaN;            // Not a Number

// Safe Integers
Number.MAX_SAFE_INTEGER;  // 9007199254740991
Number.MIN_SAFE_INTEGER;  // -9007199254740991
Number.isSafeInteger(100); // true

Number() - Convert to number
parseInt() - Parse integer
parseFloat() - Parse decimal
toFixed() - Format decimals
isNaN() - Check if not a number
isInteger() - Check if integer
Number constants for limits

Try Number Methods

HTML

<div class="number-demo">
  <h3>Number Formatter</h3>
  <input type="number" id="numInput" value="123.456789" step="any">
  <button onclick="formatNumber()">Format</button>
  <div id="numOutput"></div>
  
  <hr style="margin: 20px 0;">
  
  <h3>Currency Converter</h3>
  <input type="number" id="amount" value="100" min="0">
  <select id="currency">
    <option value="1">USD</option>
    <option value="0.85">EUR (×0.85)</option>
    <option value="0.73">GBP (×0.73)</option>
    <option value="110">JPY (×110)</option>
  </select>
  <button onclick="convertCurrency()">Convert</button>
  <div id="currencyOutput"></div>
</div>

CSS

.number-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input, select { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px 15px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#numOutput, #currencyOutput { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; }

JavaScript

function formatNumber() {
  const num = parseFloat(document.getElementById('numInput').value);
  const output = document.getElementById('numOutput');
  
  if (isNaN(num)) {
    output.innerHTML = '⚠️ Please enter a valid number';
    return;
  }
  
  output.innerHTML = `
    <strong>Number Formats for ${num}:</strong><br><br>
    Original: ${num}<br>
    toFixed(2): ${num.toFixed(2)}<br>
    toFixed(0): ${num.toFixed(0)}<br>
    toPrecision(4): ${num.toPrecision(4)}<br>
    toExponential(2): ${num.toExponential(2)}<br>
    toLocaleString(): ${num.toLocaleString()}
  `;
}

function convertCurrency() {
  const amount = parseFloat(document.getElementById('amount').value);
  const rate = parseFloat(document.getElementById('currency').value);
  const output = document.getElementById('currencyOutput');
  
  if (isNaN(amount) || amount < 0) {
    output.innerHTML = '⚠️ Please enter a valid amount';
    return;
  }
  
  const converted = amount * rate;
  const currencies = ['USD', 'EUR', 'GBP', 'JPY'];
  const index = document.getElementById('currency').selectedIndex;
  
  output.innerHTML = `
    <strong>Conversion Result:</strong><br><br>
    <div style="font-size: 24px; color: #d1039e; font-weight: bold;">
      $${amount.toFixed(2)} = ${converted.toFixed(2)} ${currencies[index]}
    </div>
  `;
}

Notes

toFixed() returns a string, not a number. Use Number(num.toFixed(2)) if you need a number.