Is there an easy way to replace NaNs with an empty string in JavaScript?

Question

When I click on the cost fields when they are blank and then click out of the $0.00 displays. I want the fields to remain blank if the user does not enter any value. Can someone help me out how do I achieve that? Listed below is the code that I have:

var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

var removeCommas = function(x) {
    return x.replace(/,/g, '');
};

var removeDollarSign = function(x) {
    return x.indexOf('$') === 0 ? x.substr(1) : x;
};

var toNumber = function(num) {
    return isNaN(num) || num === '' || num === null ? 0.00 : num;
};

var toValue = function(str) {
    return toNumber(removeDollarSign(removeCommas(str)));
};

var formatCurrency = function(val) {
    return '$' + numberWithCommas(parseFloat(toValue(val)).toFixed(2));
};

jQ('#costWages, #costExpenses').blur(function(event) {
    event.target.value = formatCurrency(event.target.value);
});

@JonasW. OP is still prepending $ sign to numberWithCommas — gurvinder372
– gurvinder372, Commented Mar 30, 2018 at 14:59

palaѕн · Accepted Answer · 2018-03-30 15:17:17Z

1

You can just use Number.prototype.toLocaleString() for this like:

const toNumber = num => !num ? 0.00 : num;

const formatCurrency = val => isNaN(val) ? '' :
  (parseFloat(toNumber(val))).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD'
  });

console.log(formatCurrency())
console.log(formatCurrency(''))
console.log(formatCurrency(null))
console.log(formatCurrency(1234.567))
console.log(formatCurrency('1234.567'))
console.log(formatCurrency('abc'))

answered Mar 30, 2018 at 15:17

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7151558 Over a year ago

this helps a little, now when I click into the fields and then click out of them, the value that's getting set in the field is just "NaN". What can I do to not have that show up and have the fields just be blank?

user7151558 Over a year ago

After changing "isNaN(val)" to just "!val" in formatCurrency, the issue seems to be resolved now. The fields are now display as blank when I click into them and then click out of them. Thanks @palash

gurvinder372 · Accepted Answer · 2018-03-30 15:00:09Z

0

Your formatCurrency can be simplified as

var formatCurrency = function(val) {
    val = val.replace(/[,$]/g, ''); //remove comma and dollar sign
    return isNaN(val) ? "" : '$' + numberWithCommas(parseFloat(toValue(val)).toFixed(2));
};

answered Mar 30, 2018 at 15:00

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

3 Comments

Herohtar Over a year ago

That should be numberWithCommas(parseFloat(val).toFixed(2) (no need for the toValue)

user7151558 Over a year ago

I tried all the solutions above, and now what's happening is that when I click into the fields and then click out of them, the value that's getting set in the field is this "$NaN". What can I do to not have that show up and have the fields just be blank?

gurvinder372 Over a year ago

@dan you need to remove call to toValue() from formatCurrency and simply pass val to parseFloat.

Collectives™ on Stack Overflow

Is there an easy way to replace NaNs with an empty string in JavaScript?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related