I have been trying to change the numbers in AngularJS application according to the countries and used .toLocaleString function over entire application using below function

numberValueTransformation(value) {
    if (value === 0 || value === undefined) {
      return 0;
    }
    const currencyLocale = this.UserPreferences.getCountryLocale().replace(/fr-FR/g, 'de-DE');
    const currencyCode = this.UserPreferences.getCountryCode();
    return Number(value).toLocaleString(currencyLocale, {
      // style: 'currency',
      currency: currencyCode,
      minimumFractionDigits: 2
    });
}

The above function works perfectly fine but I have a requirement to show the negative values in brackets over whole application. Can we modify .toLocaleString to get the negative values in brackets or do I need to change in the entire application manually? I get the value as $123456689. But if a negative value i get -$123456789, but here i want the value as ($123456789) <--- brackets represents minus.

I have been trying to change the numbers in AngularJS application according to the countries and used .toLocaleString function over entire application using below function

numberValueTransformation(value) {
    if (value === 0 || value === undefined) {
      return 0;
    }
    const currencyLocale = this.UserPreferences.getCountryLocale().replace(/fr-FR/g, 'de-DE');
    const currencyCode = this.UserPreferences.getCountryCode();
    return Number(value).toLocaleString(currencyLocale, {
      // style: 'currency',
      currency: currencyCode,
      minimumFractionDigits: 2
    });
}

The above function works perfectly fine but I have a requirement to show the negative values in brackets over whole application. Can we modify .toLocaleString to get the negative values in brackets or do I need to change in the entire application manually? I get the value as $123456689. But if a negative value i get -$123456789, but here i want the value as ($123456789) <--- brackets represents minus.

• javascript
• angularjs
• ecma

• 1 What means "the negative values in brackets"? – Roko C. Buljan Commented Feb 21, 2019 at 18:51
• @RokoC.Buljan I think he means parentheses; i.e., "(100)" means -100. – Heretic Monkey Commented Feb 21, 2019 at 18:55
• yes i mean the same ! – Aniruddhsingh Rathore Commented Feb 21, 2019 at 18:56
• There is no built-in method for these. See How can I format numbers as dollars currency string in JavaScript? for some attempts. – Heretic Monkey Commented Feb 21, 2019 at 18:59
• Just out of curiosity, when and why would one want to put a negative number into a string, positive and inside brackets? – Roko C. Buljan Commented Feb 21, 2019 at 19:00

3 Answers 3

You can use .toLocaleString function directly as follows:

function numberValueTransformation(value) {

    if (value === null || value === undefined) {
      return 'some special value like N/A';
    }

    const currencyLocale = this.UserPreferences.getCountryLocale().replace(/fr-FR/g, 'de-DE');
    const currencyCode = this.UserPreferences.getCountryCode();

    return Number(value).toLocaleString(currencyLocale, {
      style: 'currency',
      currency: currencyCode,
      currencySign: 'accounting', // this is the key
      minimumFractionDigits: 2
    });
}

Instead of directly returning the result, you can wire up the check yourself. Do the conversion on a positive number, if instead the original value is less then 0 then wrap in brackets.:

var absValue = Math.abs(value);
var returnString = Number(absValue).toLocaleString(currencyLocale, {
    // style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2
});

return value < 0 ? '(' + returnString + ')' : returnString;

For this maybe look at the numbro.js library https://numbrojs./ There is a feature to format negative values in brackets as requested. The code would work like this

console.log(
numbro(-123456.78).formatCurrency({
    thousandSeparated: true,
    mantissa: 2,
    negative: "parenthesis" // This does what you want
}))

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/numbro.min.js"></script>