React / Javascript 中的货币格式

Question

Good afternoon folks!

I'm using React NumberFormat for currency formatting, it works well, but I couldn't reproduce with it the behavior I want for my page.

I would like the user to type in the 1010 input, and the input automatically corrects it to $ 10.10.

However, all the methods I found, when the user types 1010, he corrects it for $ 1010.00.

How do I get to this behavior in real time in the input? As soon as the user types, it is already formatting.

Appreciate!

I need a regular expression or code, where:

I type - return code

1010 ===> 10.10
1000 ====> 10.00
1050 =====> 10.50
100050 ====> 1,000.50

Answer 1

You can try making a "format" function like below:

function formatCurrency(currencyString) {   
    let firstHalf = currencyString.substring(0, currencyString.length - 2);
    let secondHalf = currencyString.substring(currencyString.length - 2, currencyString.length);
    return parseFloat(`${firstHalf}.${secondHalf}`).toLocaleString('en-EN', {style: 'currency', currency: 'USD'});
}

// example use case: 
let cur = formatCurrency('1010'); // returns: '$10.10'
cur = formatCurrency('101010') // returns: '$1,010.10'

This way you are always getting the last two characters on the right side of the decimal, as you're trying to do, and using localization to properly format the number.