If you’re building a plugin or theme for WordPress, you’re probably familiar with localizing numbers. Localizing a number is the art of taking a number, such as 2323807, and formatting it for specific languages such as English or German.

Your plugin or theme should fit in with the WordPress site it runs on. If the site’s language is English, you should format the number as 2,323,807. If it’s German, you should format the number as 2.323.807.

Luckily, WordPress and PHP give you some tools to make localizing numbers easy. Let’s quickly cover those to ensure we’re on the same page. Then we’ll explore how we can perform the same localization in JavaScript.

Formatting numbers

WordPress makes it easy to localize a number. Just call number_format_i18n and pass the number as an argument. It will return a formatted string representation of the PHP number.

1$number = 2300.75;
2 
3number_format_i18n($number);    // 2,301

You can also specify the decimal precision using the second argument. The example below limits the formatted number to a single decimal place.

1$number = 2300.75;
2 
3number_format_i18n($number, 1); // 2,300.8

The two examples above are from a WordPress site with the language set to “English (United States)”. If you set the language to “Deutsch”, the first example would display 2.301 and the second example would show 2.300,8.

What about currencies and percentages?

WordPress doesn’t provide any functions for formatting currencies or percentages. For those, you’ll need to use PHP’s NumberFormatter.

NumberFormatter isn’t part of WordPress, so it doesn’t know your site’s language. You can grab your site’s locale using get_locale. This WordPress function will return your site’s locale, which you can then pass to NumberFormatter when you initialize it. This will ensure that NumberFormatter formats numbers according to the site’s locale.

The example below formats a couple of currencies with the site’s language set to English.

1$number = 2300.75;
2 
3$formatter = new NumberFormatter(get_locale(), NumberFormatter::CURRENCY);
4 
5$formatter->formatCurrency($number, 'EUR'); // €2,300.75
6 
7$formatter->formatCurrency($number, 'USD'); // $2,300.75

You can format percentages too. The example below shows that off.

1$number = .75;
2 
3$formatter = new NumberFormatter(get_locale(), NumberFormatter::PERCENT);
4 
5$formatter->format($number); // 75%

Localizing in JavaScript

So far, all the examples we’ve seen involve localizing a number in PHP, but what if the number we want to localize isn’t in PHP? What if we need to localize a number on the frontend with JavaScript?

For example, imagine you’re rendering a sales data chart in JavaScript. You have a chart library that expects the sale data to be an actual number that can be plotted and compared, such as 23807. That’s different from what you want to show users. You want to show a properly localized currency, such as $23,807.

Fear not. You can localize numbers in JavaScript using Intl.NumberFormat.

Passing the site’s locale to JavaScript

Out of the box, WordPress does not share the site’s locale with JavaScript, so the first thing you need to do is pass the site’s locale to JavaScript when enqueueing your scripts.

Pull up the documentation for Intl.NumberFormat, and you’ll see that the first argument should be a IETF BCP 47 language tag. A BCP 47 locale is different from get_locale returns.

To get the BCP 47 locale for a WordPress site, call get_bloginfo and fetch 'language'.

1// Get the BCP 47 locale using get_bloginfo
2 
3get_bloginfo('language'); // en-US

Next, you need to pass the locale to JavaScript. To do this, call wp_localize_script after registering a script. It’s a handy way to pass values from PHP to JavaScript.

The first argument is the script’s handle. The second argument is the name of the JavaScript object to create. The third argument is an associative array of values you’d like to make available in JavaScript.

The example below creates an options object with a single property named language.

1// Enqueue your JavaScript file like you already do
2wp_enqueue_script('some_script', '/path/to/some_script.js');
3 
4// Localize your script with the locale
5wp_localize_script('some_script', 'options', [
6    'locale' => get_bloginfo('language')
7]);

You’ll now be able to access the locale in JavaScript. I’d recommend quickly testing that it was set correctly by logging it to the console.

1console.log(options.locale) // en-US

Number localization in JavaScript

With the site’s locale available in JavaScript, all that’s left to do is use Intl.NumberFormat to localize some numbers.

Localize a decimal in JavaScript

Localizing a decimal with Intl.NumberFormat is straightforward as 'decimal' is the default formatting style.

As you can see in the example below, you first want to create a new instance of Intl.NumberFormat. Pass in the local as the first argument. From there, you can call the format method on your formatter and pass in the number to localize.

1const number = 2300.75
2 
3const numberFormatter = new Intl.NumberFormat(options.locale)
4 
5numberFormatter.format(number)   // 2,300.75

You can customize the format by passing an options object as the second argument to the constructor. In the example below, maximumFractionDigits is set to 0 to remove all decimals.

1const number = 2300.75
2 
3const altNumberFormatter = new Intl.NumberFormat(options.locale, {
4    maximumFractionDigits: 0
5})
6 
7altNumberFormatter.format(number) // 2,301

Localize a currency in JavaScript

You can localize a currency by setting a couple of formatting options. First, set style to 'currency'. Second, set currency to the currency code you’d like to use. The example below uses 'EUR', but you could swap that out for 'USD', 'AUD', or any other currency code you might want to use.

1const number = 2300.75
2 
3const currencyFormatter = new Intl.NumberFormat(options.locale, {
4    style: 'currency',
5    currency: 'EUR'
6})
7 
8currencyFormatter.format(number) // €2,300.75

Localize a percentage in JavaScript

You can localize a percentage by setting style to 'percent'.

1const number 0.75
2 
3const asPercent = new Intl.NumberFormat(options.locale, {
4  style: "percent",
5})
6 
7asPercent.format(amount); // 75%

What else can you localize?

JavaScript’s Intl can localize more than just numbers. It supports the localization of dates, lists, pluralization rules, and more. All of these require that same BCP 47 locale, so the hard work is already done. All you need to do is pass in the local and the value to localize. JavaScript will take care of the rest.

That’s it

That’s all there is to it. You can now localize numbers in JavaScript according to your WordPress site’s locale.

Happy localizing!

👨‍💻✌️