[英]Using NumeralJS, how can I determine the format based on whether a number is thousands or millions
My header pretty much sums it up, in my application Im formatting a value only when the value is greater than 6 digits.我的标题几乎总结了它,在我的应用程序中,我仅在值大于 6 位时才格式化一个值。 When the value is thousands, eg 210,500, I want to display it as 210.5k, if the value is in the millions, eg 2,120,000, I want to display it as 2.12m.如果值是千,例如210,500,我想显示为210.5k,如果值是百万,例如2,120,000,我想显示为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目前,格式字符串 ('0,0.[00]a') 会将这两个数字显示到两个小数位,但我希望根据值是千位还是千位来确定百万
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.此值显示在卡片上,当数字中有 6 位或更多位时必须格式化。 Formatting should be 1 decimal place for values in the thousands, and 2 decimal places shown for values in the millions (or greater)千位值的格式应为小数点后 1 位,百万(或更大)的值应显示小数点后 2 位
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, eg 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>
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:看起来您有以下情况:
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.注意:对数字67500.89
的测试已更改为预期结果为67.5k
,因为6.7k
似乎是一个错字。
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
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.