CODEWITHSUNDEEP
javascriptlocale
Federico
Federico

Reputation: 479

Chrome - toLocaleString() - Thousands separator is not working for Spanish

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

enter image description here

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?

Upvotes: 5

Views: 2670

Answers (4)

saeraphin
saeraphin

Reputation: 435

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.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#usegrouping

Upvotes: 3

Klauder Dias
Klauder Dias

Reputation: 7

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

Settings

Result

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

Upvotes: 0

Eddy
Eddy

Reputation: 21

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

Upvotes: 1

Oscar Ortiz
Oscar Ortiz

Reputation: 76

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.org/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"

Upvotes: 5

Related Questions