comma separation for numbers in Framer

Question

I have a dynamic text layer with a number

dollarAmountValue = 9000
dollarAmount = new Layer
dollarAmount.html = "$" + dollarAmountValue

I also have a + and - button that increments dollarAmountValue by 100

dollarPlus.onClick ->
    dollarAmountValue = dollarAmountValue + 100

dollarMinus.onClick ->
    dollarAmountValue = dollarAmountValue - 100

So the dollar amount displays as $9000, all good. What I'm trying to do is display it as $9,000 and have the comma separation for 1000's as the +/- increment buttons are pressed. Any help would be greatly appreciated. Thanks!

Answer 1

Here's something short:

convertToDollar = (value) -> 
    value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');

You can then use it like this:

convertToDollar(9000)
# Result: 9,000.00
convertToDollar(9100)
# Result: 9,100.00

Framer.js uses Coffeescript, which compiles into Javascript, so it may be helpful to look at some Javascript answers. The above code is based on:

https://stackoverflow.com/a/14428340/747339