有这样一个需求，用户在 input 中输入金额，为了展示效果，需要：

  • 用户输入时，自动添加千分位
  • 输入结束，提交时仍提交数字（不包含千分位）

因为最近正在学习 React.js，就试着练练手，用 React 实现满足上述需求的 input 组件。

千分位

维基百科 对千分位有清楚的说明，这里只举一个例子。

123456.9876

的千分位是

123,456.987,6

另外千分位可以用逗号，也可以用空格。这里就不做区分，都只用逗号表示。

对数字添加千分位的 js 实现也有 很多，这里就选最简单的一种。

添加千分位：

1
2
var amount = '123456.9876';
var amountThusandth = amount.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,");

去除千分位：

1
2
var amountThusandth = '123,456.987,6';
var amount = amountThusandth.replace(/,/g, '');

不过需要提醒一下，不要使用 toLocaleString()，toLocaleString 函数无法对小数部分添加千分位，并且在不同浏览器的效果不同。

实现

React.js 对我来说，是一种全新的思考套路，如果不熟悉 React 的话，非常建议先阅读下面这两篇文章：

  1. React.js 的介绍 - 针对了解 jQuery 的工程师
  2. React 编程思想

对输入的数字添加千分位这个问题，实际上是一个很典型的问题：

  • 用一个 state 来保存添加千分位的结果
  • input 的 value 由 state 设置
  • 在 input 的 onChange 中，处理用户输入的值，并通过 this.setState 更新

Demo

参考

小數點 - 维基百科
从千分位格式化谈 JS 性能优化
React.js 的介绍 - 针对了解 jQuery 的工程师
React 编程思想