How to format numerical inputs as currency values

January 30, 2024

Suppose you have to implement a function that takes a floating point number and returns the amount formatting in dollars and cents.

formatMoney(2); // Output: $2.00
formatMoney(2.9); // Output: $2.90
formatMoney(29.99); // Output: $29.99
formatMoney("a"); // Output: Invalid amount

The way I will build is the following.

First, I would create a formatMoney() function that accepts a number as a parameter.

/**
 * Formats a numeric value as a currency string with two decimal places.
 * @param {number} amount - The numeric value to be formatted as currency.
 * @returns {string} - A string representing the formatted currency value, starting with a dollar sign ('$'). If the amount is not a valid number, returns the string 'Invalid input'.
 */
function formatMoney(amount) {
  // ...
}

Inside the function, I would convert the amount to a floating-point number using parseFloat and store the result in a variable called parsedAmount.

/**
 * Formats a numeric value as a currency string with two decimal places.
 * @param {number} amount - The numeric value to be formatted as currency.
 * @returns {string} - A string representing the formatted currency value, starting with a dollar sign ('$'). If the amount is not a valid number, returns the string 'Invalid input'.
 */
function formatMoney(amount) {
  const parsedAmount = parseFloat(amount);
}

Next, I would use the isNaN function to check if the amount is NaN after being converted to a number. If it is not a valid number, the function returns the string 'Invalid input'.

/**
 * Formats a numeric value as a currency string with two decimal places.
 * @param {number} amount - The numeric value to be formatted as currency.
 * @returns {string} - A string representing the formatted currency value, starting with a dollar sign ('$'). If the amount is not a valid number, returns the string 'Invalid input'.
 */
function formatMoney(amount) {
  const parsedAmount = parseFloat(amount);

  if (isNaN(parsedAmount)) {
    return "Invalid amount";
  }
}

Now, if the amount is valid, the function returns a string that starts with the dollar sign ($) followed by the formatted amount with the help of the toFixed(2) method. This method formats the number with exactly two decimal places.

/**
 * Formats a numeric value as a currency string with two decimal places.
 * @param {number} amount - The numeric value to be formatted as currency.
 * @returns {string} - A string representing the formatted currency value, starting with a dollar sign ('$'). If the amount is not a valid number, returns the string 'Invalid input'.
 */
function formatMoney(amount) {
  const parsedAmount = parseFloat(amount);

  if (isNaN(parsedAmount)) {
    return "Invalid amount";
  }

  return `$${parsedAmount.toFixed(2)}`;
}

Now, I can use our function like this:

/**
 * Formats a numeric value as a currency string with two decimal places.
 * @param {number} amount - The numeric value to be formatted as currency.
 * @returns {string} - A string representing the formatted currency value, starting with a dollar sign ('$'). If the amount is not a valid number, returns the string 'Invalid input'.
 
 * @example
 * // Valid amounts
 * console.log(formatMoney(2)); // Output: $2.00
 * console.log(formatMoney(2.9)); // Output: $2.90
 * console.log(formatMoney(29.99)); // Output: $29.99
 *
 * // Invalid amount
 * console.log(formatMoney('a'));   // Output: Invalid amount
*/
function formatMoney(amount) {
  const parsedAmount = parseFloat(amount);

  if (isNaN(parsedAmount)) {
    return "Invalid amount";
  }

  return `$${parsedAmount.toFixed(2)}`;
}