In Chrome, when the locale is set in 'es' the thousands separator is not there.

If I use 4 digit number, there is not problem

Data Set:

(2500).toLocaleString('en')
"2,500"
(2500).toLocaleString('pt')
"2.500"
(2500).toLocaleString('es')
"2500"

(25000).toLocaleString('es')
"25.000"

Why is this happen?

In Chrome, when the locale is set in 'es' the thousands separator is not there.

If I use 4 digit number, there is not problem

Data Set:

(2500).toLocaleString('en')
"2,500"
(2500).toLocaleString('pt')
"2.500"
(2500).toLocaleString('es')
"2500"

(25000).toLocaleString('es')
"25.000"

Why is this happen?

• javascript
• locale

4 Answers 4

According to the CLDR, this is the intended behavior. The "Minimum Grouping Digits" is 2, meaning that, only when a number has 2 digits before the other 3 digits, the thousand separator would appear. Apparently, this was only applied to chrome, since other browsers are using the "old" specifications.

Check this https://st.unicode/cldr-apps/v#/es/Symbols/70ef5e0c9d323e01

A possible workaround I used FOR SPECIFIC CASES, is to set it to the German locale ("de") instead of Spanish:

(1000).toLocaleString("de")

"1.000"

The behaviour is indeed the one mentioned in the accepted answer.

However, rather than using the workaround mentioned above which defeats the purpose of using the toLocaleString() function, I would suggest using the useGrouping: true parameter.

const number = 1000
const localNumber = number.toLocaleString("es-ES", { useGrouping: true })

console.log(localNumber)
// expected output: '1.000'

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#usegrouping

Note that using any Latin American Spanish locale will bypass the issue (and is a closer match to es-ES than using German).

For me, works using both configuration. Follow the images.

Sorry, I forgot say that I'm using the plugin i18n to Vue.