An optional configuration to add a thousander to the display of multi-digit numbers

[superzou2021]

Please forgive me if my English is not very good, the following content is machine translated, I will attach my mother tongue explanation at the end of the article.

The dynamic effect of numbers is often used in various statistics and displays. When the data is too long or associated with money, it is usually separated by a comma with 3 digits, for example, an increase from $100 to $1,000 needs to be displayed as 100.01 to 1,000.01$; Or it must be displayed completely too long, not convenient for people to quickly recognize its unit of calculation, such as 20 million writing: 20000000 →20,000,000; So I hope to add a configuration item to this project in order to enrich its extensibility.
In view of the project requirements of the company, I currently use vue+gsap to implement relevant logic, use gsap to deal with data changes of type number, and use my own extra defined functions in template to perform number.tolocalestring () operation on number data.

数字的动效常被用于各种统计和显示中。当数据过长或者与金钱产生关联的时候，通常会按照3位进行逗号分割，例如从100美元增加到一千美元需要显示为100.01$到1,000.01$；或者是必须完整的显示过长的数字，不方便人们快速认识到它的计算单位，比如两千万写作：20000000 →20,000,000；所以我希望能够在这个项目中，增加一个配置项，以便于丰富它的扩展性。
我鉴于公司的项目需求目前是使用vue+gsap来实现相关逻辑，使用gsap来处理number类型的数据变动,在template中使用自己额外定义的函数来对number数据进行number.toLocaleString()操作。

[barvian]

Hi 👋, I'm not sure if I fully understand but have you seen the notation: 'compact' setting? https://codesandbox.io/p/sandbox/number-flow-react-forked-w7f8p3

[superzou2021]

notation: 'compact' is a other way,What I mean is: When displaying a long string of numbers, you can use a configuration item to convert the number into a string and add a thousandth character as an animation. The following is a code schematic:

let num=900
//animation
num+=100;
//result now
return num  //'1000' or '1k'

//hope result as string
return num.tolocalestring ()  //1,000

[superzou2021]

I hope this configuration item only changes the way the numbers are displayed, not the type of data, otherwise you may not be able to use Math's related methods the second time you try to change the numbers.