使用NumeralJS，如何根据数字是数千还是数百万来确定格式？

Question

在我的应用程序中，只有当值大于6位数时，我才格式化一个值。当数值是千，例如，210,500，我想显示它为210.5k，如果值是数百万，例如，212万，我想显示它为2.12m。目前，格式字符串('0,0.00a')将把这两个数字都显示到小数位，但我希望根据值是千还是百万来确定这一点。

这是最好的方法来循环这个值，直到达到一个小数点，然后根据这个数字确定格式吗？我尝试过使用自定义格式对象，但很难理解在引擎盖下发生了什么。

此值显示在卡上，当数字中有6个或更多位数时，必须对其进行格式化。格式应该是以千为单位的值为1小数位，对于百万(或更高)的值为2小数位。

所需投入和产出：

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;
}

可运行的片段：

​

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>

​

Answer 1

在这种情况下，您将需要使用不同的格式字符串，这取决于原始数字的大小。看起来您有以下情况：

如果数字小于1000，则以长格式返回相同的数字，但最多返回两个小数位。如果数字在1000-10,000,000之间，则以长格式返回相同的数字，没有小数位；如果数字在10,000-1,000,000之间，则返回相同的数字；如果数字在10,000-1,000,000之间，则以速记格式返回相同的数字，最多只返回一小数位；如果数字大于1,000,000，则以速记格式返回相同的数字，最多以小数的形式返回。

• F 29>

对于每一种情况，您都需要一个不同的格式字符串。您可以通过将数字与每个阈值进行比较并根据其大小设置格式字符串来做到这一点。

​

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>

​

注意:对number 67500.89的测试被更改为预期结果是67.5k，因为6.7k似乎是一个错误。

Answer 2

下面是我一段时间前构建的一个数字速记格式化程序的代码示例，它完全符合您的要求。

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
  );
}