Using toLocaleString for number objects in JavaScript
Tags: javascript, tolocalestring, number, languages
Published: 2019-07-15 03:28:02

---
title: Using toLocaleString for number objects in JavaScript
published: true
description: Interested in formatting numbers in various languages for humans? Give this article a read right away!
tags: javascript, toLocaleString, number, languages
cover_image: https://www.sitepen.com/blog/wp-content/uploads/2017/07/blog-80.jpg
---

The `toLocaleString` method in JavaScript is present on the array, date, number object and object data types. This article focuses on the `toLocaleString` method on JavaScript number objects. Note that `toLocaleString` doesn't exist in Node.js as at the time of this writing.

The `toLocaleString` method, when called on a JavaScript number object (not a number literal like 234 or 3, but an identifier - a variable or a constant - with a number value), formats the number based on the values passed into it and returns a string representation of the formatted value. Well, so why not use `toString` if that's all the `toLocaleString` method does? Good question!

The `toLocaleString` method takes in arguments that tell it what human language to format the number object into. In other words, while the Britons will write 'five hundred thousand' as `500,000`, the Spaniards will write it as `500.000`. The `toLocaleString` will take the number `500000` and if you ask it to format it for the Britons, it will return `'500,000'`. If asked to format it for the Spaniards, it will return `'500.000'`. Everyone will understand the number in their native language. Talk about babel, but for JavaScript numbers to humans. It has support for Arabic too. Now, isn't that awesome?

Okay, talk is cheap. Show me the code.

```javascript
let num = 500000;
let britishNum = num.toLocaleString("en-GB"); //en-GB: Great Britain English
let numeroEsp = num.toLocaleString("es-ES"); //es-ES: Spanish Spanish
let arabicNum = num.toLocaleString("ar-EG"); //ar-EG: Eastern Arabic
console.log("British representation: ", britishNum); // 500,000
console.log("Spanish representation: ", numeroEsp); // 500.000
console.log("Arabic representation: ", arabicNum); // ٥٠٠٬٠٠٠
```

Awesome init? Now here's some explanation, and some more `toLocaleString` awesomeness.

The format or syntax for the implementation of `toLocaleString` is like this: `numObj.toLocaleString([locales [, options]])`, where

- `numObj` is the number object to be formatted,
- `locales` represents a string (like `es-ES` or `ar-EG`) which is the language to be formatted into, (See [this stackoverflow question](https://stackoverflow.com/questions/3191664/list-of-all-locales-and-their-short-codes) for a list of `locales` codes.)
- `options` is an object, with properties that contain some really extra-awesome formatting options, like formatting for currency, how many decimal places do you want ish.
  The square braces `[]` only mean that `locales` and `options` are optional. In other words, one can use the `toLocaleString` method without passing them in.

😲 So what language will it be formatted into if one doesn't pass in any parameters? To the default language of your browser of course!.

Now to the **really extra-awesomeness** part. Talk is cheap you say? Show me the code.

- Currency formatting

```javascript
let num = 500000;
let britishCurrency = num.toLocaleString("en-GB", {
  style: "currency",
  currency: "GBP",
});
let japaneseCurrency = num.toLocaleString("ja-JP", {
  style: "currency",
  currency: "JPY",
});

console.log("British currency: ", britishCurrency); // £500,000.00
console.log("Japanese currency: ", japaneseCurrency); // ￥500,000
```

- Number of decimal places

```javascript
let num = 500000.5525;
let british = num.toLocaleString("en-GB", {
  maximumFractionDigits: 3,
});
let spanish = num.toLocaleString("es-ES", {
  maximumFractionDigits: 2,
});

console.log("British: ", british); // 500,000.553
console.log("Spanish: ", spanish); // 500.000,55
```

Code shown. Now to the explanation, shall we?

The object passed in after the `locales` parameter contains properties which one can customise as they please to get the number format that they want. `style`
`currency` and
`maximumFractionDigits` are some of those properties. The object holding those properties is the `options` parameter in the syntax above.

You can view the [MDN Docs on using the `options` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Using_options) to customize your `toLocaleString` output.

Good luck using `toLocaleString` with number objects!

Cover image by [sitepen](https://www.sitepen.com/)