Ant 設計 - 帶逗號小數分隔符的貨幣輸入

Question

我想使用 Antd 的<InputNumber />組件作為貨幣輸入，我使用的是官方文檔建議的：

<InputNumber
    min={0}
    size="large"
    style={{ width: 400 }}
    formatter={value => `$ ${value}`.replace(new RegExp(/\B(?=(\d{3})+(?!\d))/g), ',')}
    parser={value => value.replace(new RegExp(/\$\s?|(,*)/g), '')}
/>

但我希望我可以使用逗號數字作為小數分隔符： R$ 17.350,70

輸入我的貨幣信息的正確正則表達式格式和解析器是什么？

Answer 1

如果 JavaScript RegExp有一個向后標志，這會更簡潔。 既然沒有，我們必須反轉字符串，插入標點符號，然后將其反轉回來。

解析只是簡單地替換所有非數字\D ，什么都沒有。

我更熟悉使用句號. 作為小數,逗號作為千位分隔符，但是您應該很容易將其反轉。

 const numbers = [1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 123456789].map(String); function format(number) { return number.split('').reverse().join('').replace(/(\d{1,2})(\d{1,3})?(\d{1,3})?(\d{1,3})?/, '$1.$2,$3,$4').split('').reverse().join('').replace(/^,+/, '') } function parse(money) { return money.replace(/\D/g, ''); } function log(n) { console.log(n); } numbers.map(format).forEach(log);

Answer 2

我知道主要提問者已經遲到了，但是由於我花了相當多的時間來弄清楚它，所以我想提供我的格式化程序功能，以防有人仍在尋找一個干凈的解決方案來將輸入數字格式化為貨幣（帶有千位分隔符和兩位小數）

const formatNumberWithThousandSeparatorAndTwoDecimalPlaces = value => new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
}).format(value).replace(/€/g, '');

稱為：

 formatter={formatNumberWithThousandSeparatorAndTwoDecimalPlaces}

上面的 function 把一個 123456 變成 123.456,00 和一個 123456.78 變成 123.456,78 還需要設置如下屬性

 decimalSeparator = {','}

*隨意更改小數點分隔符或語言環境/貨幣類型：*如果要將輸入解析為所需的格式化數字，您還需要一個解析器：類似於：

 parser={value => value.replace('.', '').replace(/,/g, '.')} 

所以你有一個來自 123.456,78 的 123456.78。

*如果要保留貨幣符號，可以保留.format(value).replace(/€/g, '')部分，但稍后必須將其添加到解析器 function