Using NumeralJS, how can I determine the format based on whether a number is thousands or millions

Question

My header pretty much sums it up, in my application Im formatting a value only when the value is greater than 6 digits. When the value is thousands, e.g. 210,500, I want to display it as 210.5k, if the value is in the millions, e.g. 2,120,000, I want to display it as 2.12m. Currently the format string ('0,0.[00]a') will display both of these numbers to both decimal place(s), but I'd like that to be determined based on the whether or not the value is thousands or millions

Is the best way to figure this out to loop through the value until a decimal is reached and then determine the formatting based on that number? I have tried using the Custom Format object but am having a hard time understanding what's happening under the hood.

This value is displayed on a card and has to be formatted when there are 6 or more digits in the number. Formatting should be 1 decimal place for values in the thousands, and 2 decimal places shown for values in the millions (or greater)

Desired inputs and outputs:

210500 --> 210.5k
2120000 --> 2.12m
67500.89 --> 6.7k
6750000 --> 6.75m
16.75 --> 16.75
67530.85 --> 67.5k 
675 --> 675
6700.05 --> 6700
2522.25 --> 2522

function formatValue(value: string | number, shorthandFormat: boolean = true, shorthandLength: number = 6) {
    if (value === undefined || value === null) return '?';

    let valueString = value.toString();

    if (valueString.trim() === '') return '';

    if (shorthandFormat) {
        if (!shorthandLength || shorthandLength < 0) {
            shorthandLength = 6;
        }

        if (valueString.length <= shorthandLength) {
            shorthandFormat = false;
        }
    }

    let numeralValue = numeral(value)

    let formatter = shorthandFormat ? '0,0.[0]a' : '0,0.[00]';

    let formattedValue = numeralValue.format(formatter);
    
    return formattedValue;
}

Runnable snippet:

function formatValue(value, shorthandFormat = true, shorthandLength = 6) {
  if (value === undefined || value === null) return '?';

  let valueString = value.toString();

  if (valueString.trim() === '') return '';

  if (shorthandFormat) {
    if (!shorthandLength || shorthandLength < 0) {
      shorthandLength = 6;
    }

    if (valueString.length <= shorthandLength) {
      shorthandFormat = false;
    }
  }

  let numeralValue = numeral(value)

  let formatter = shorthandFormat ? '0,0.[0]a' : '0,0.[00]';

  let formattedValue = numeralValue.format(formatter);

  return formattedValue;
}

// 210,500, I want to display it as 210.5k, if the value is in the millions, e.g. 2,120,000, I want to display it as 2.12m
console.log(formatValue(210500))
console.log(formatValue(2120000))
console.log(formatValue(675000))

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

@CRice added! I did remove a couple lines in which we deal with parenthesis, percentages, and negatives but those lines shouldnt matter here based on what Im trying to do — Jill, Jun 24 '22 at 18:32
Using the format `let formatter = shorthandFormat ? '0.[00]a' : '0,0.[00]a'` gives the result you want for the two example numbers you gave (`210500` and `2120000`). Does it also give your desired result for other numbers? If not, can you provide a larger list of input numbers and the desired output? — CRice, Jun 24 '22 at 18:47
It does, and it's not that what I want to change this per se, but add to it. currently this formats any number (including symbols) over 6 characters, but thousands and millions are being formatted the same as a result. So both numbers will only show a single digit after the decimal place, however in the case of millions I'd like to display 2 digits, while the thousands still remains at just 1. e.g. with what we have now, 6,755 is displayed in full, but 67,500 would be displayed as 67.5k, and 6,750,00 would be displayed as 6.8m, but what I want is 6.75m instead if that makes sense — Jill, Jun 24 '22 at 18:55
Alright, I'm still not totally clear so could you edit in, say, 5-10 input number examples and the output you want for each? So far I've got `210500` -> `210.5k`, `2120000` --> `2.12m`, `67500` --> `67.5k` and `6750000` --> `6.75m`. — CRice, Jun 24 '22 at 19:01

score 1 · Accepted Answer · answered Jun 24 '22 at 21:30

In this case you will need to use a different format string depending on the size of the original number. It looks like you have the following cases:

If the number is under 1000, return the same number in long format but with at most two decimal places.
If the number is between 1000-10,000, return the same number in long format with no decimal places.
If the number is between 10,000-1,000,000, return the same number in shorthand format, with at most one decimal place.
If the number is larger than 1,000,000, return the same number in shorthand format, with at most two decimal places.

For each of these cases you will need a different format string. You can do that by comparing the number to each threshold and setting the format string depending on its size.

function formatValue(value, shorthandFormat = true, shorthandLength = 5) {
  if (value === undefined || value === null) return '?';

  let valueString = value.toString();
  if (valueString.trim() === '') return '';

  let numeralValue = numeral(value)

  // Note the format changes depending on how large the value is.
  let formatter = "0[.][00]" // Default formatter: returns the same number with at most, two decimals.
  if (value > 1000) formatter = "0" // Over 1000: remove any decimal part.
  if (value > 10000) formatter = "0.[0]a" // Over 10000: use shorthand with at most, one decimal.
  if (value > 1000000) formatter = "0.[00]a" // Over 1000000: use shorthand with at most, two decimals.

  let formattedValue = numeralValue.format(formatter);

  return formattedValue;
}

const tests = [
  // Small numbers contain at most, two decimals.
  [0, "0"],
  [1, "1"],
  [1.1, "1.1"],
  [1.11, "1.11"],
  [1.115, "1.12"],
  [11.1, "11.1"],
  [11.11, "11.11"],
  [16.75, "16.75"],
  [675, "675"],
  [675.5, "675.5"],
  [675.55, "675.55"],
  
  // Numbers between one-thousand and ten-thousand may not contain decimals.
  [6700.05, "6700"],
  [2522.25, "2522"],
  [6000, "6000"],
 
  // Numbers between ten-thousand and one-million should use shorthand, with at most one decimal.
  [67500.89, "67.5k"],
  [67530.85, "67.5k"],
  [210500, "210.5k"],
  [210000, "210k"],
  
  // Numbers greater than one-million should use shortand, with at most two decimals.
  [2120000, "2.12m"],
  [6750000, "6.75m"],  
  [2000000, "2m"],
  [2100000, "2.1m"],
  [2010000, "2.01m"],
  [2001000, "2m"],
]

tests.forEach(([input, output]) => console.log(`${formatValue(input) === output ? "PASS" : "FAIL"}: ${input} --> ${formatValue(input)}. Expected: ${output}`));

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Note: The test for number 67500.89 was changed to expect 67.5k as the result, since 6.7k seemed to be a typo.

Thank you for this solution! It does seem to meet the criteria after some testing! Also thank you for helping me formulate a better question for this, I appreciate you taking the time to help!! — Jill, Jun 26 '22 at 22:56

score 0 · Answer 2 · answered Jun 24 '22 at 19:36

Here is code example from a number shorthand formatter I built awhile ago that does exactly what you want.

function numberIntoString({
  value,
  decimals,
}) {
  value = value.toString().replace(/[^0-9.]/g, "");
  let si = [
    { value: 1e3, symbol: "K" },
    { value: 1e6, symbol: "M" },
    { value: 1e9, symbol: "B" },
    { value: 1e12, symbol: "T" },
  ];
  let i;
  for (i = si.length - 1; i > 0; i--) {
    if (value >= si[i].value) {
      break;
    }
  }
  return (
    (value / si[i].value)
      .toFixed(decimals)
      .replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + si[i].symbol
  );
}

Using NumeralJS, how can I determine the format based on whether a number is thousands or millions

2 Answers2