top of page
Search

Modern Javascript Adobe After Effects Expressions - toLocaleString

  • Writer: Roland Kahlenberg
    Roland Kahlenberg
  • Apr 8
  • 2 min read

Updated: Apr 14

The toLocaleString has been around since the late 1990s. However, its implementation with options for locale and styling has made it a required use for Websites.


In After Effects, the vast majority of users are still oblivious. It's also common to hear of users writing convoluted Expressions to have numbers correctly displayed for a specific country. And quite a number of tutorials cover using such drastic solutions.


Fortunately, for you, here's an elegant solution that will have you covered for any country/locale in the world using largely a single method and its options.



This video uses toLocaleString to correctly display Currency, Date and Time. Data can be spreadsheet/data driven and encased in a Responsive Container to provide a bespoke experience for users.


Here is an After Effects Expression that displays the Swiss Currency using a Base Number which you can change. You can also change the Country Name, Locale String and Currency Code. I've provided a few samples as well as URLs to obtain more codes.

The Locale String is a two-part referencing system that specifies the language and country codes. Language and country are separated to ensure correct application of information for countries that have more than one official language under the international directory that holds these details. For example, the Locale String for the USA is - en-US. Take a look at the URLs list below to find your own country's Locale String.


// Start of Expression

// Change this to try different numbers

var inputNumber = 12345.67;


/*

Input the Country Name, Locale String and Currency for correct formatting.

Look through the URLs at the end to obtain correct Names/Codes.

*/

var inputCountry = "Switzerland";

var locale = "de-CH";

var inputCurrency = "CHF";



// From here onwards, the Expression runs on Auto-Mode

// Format the number with currency using the specified locale

var formattedNumber = inputNumber.toLocaleString(locale, {

style: "currency",

currency: inputCurrency,

minimumFractionDigits: 2

});



// Combine the country name and the formatted number using a Template Literal

`${inputCountry} : ${formattedNumber}`



// End of Expression




Here are sample Country Name, Locale String & Currency Codes

"Germany", "de-DE", "EUR"

"UK", "en-GB", "GBP"

"Spain", "es-ES", "EUR"

"Holland", "nl-NL", "EUR"

"Switzerland", "de-CH" , "CHF"




Reference URLs related to toLocaleString() :


- toLocaleString() (with style/currency options):


Resources for Country and Currency Codes:


- ISO 4217 Currency Codes: https://en.wikipedia.org/wiki/ISO_4217


- JS Locale Data (Intl):



MDN Web Docs - Template literals (Template strings):





Here's another Expression with more sample countries -


// Start of Expression // Input Number

var numberInput = 456342.25;



// Lookup Table: Country -> { locale, currency }

var countries = {

"Germany": { locale: "de-DE", currency: "EUR" },

"UK": { locale: "en-GB", currency: "GBP" },

"Holland": { locale: "nl-NL", currency: "EUR" },

"Spain": { locale: "es-ES", currency: "EUR" },

"Switzerland": { locale: "de-CH", currency: "CHF" }

};



// Display all formats for comparison

`Base Number: ${numberInput}


Germany: ${numberInput.toLocaleString("de-DE", { style: "currency", currency: "EUR", minimumFractionDigits: 2 })}

UK: ${numberInput.toLocaleString("en-GB", { style: "currency", currency: "GBP", minimumFractionDigits: 2 })}

Holland: ${numberInput.toLocaleString("nl-NL", { style: "currency", currency: "EUR", minimumFractionDigits: 2 })}

Spain: ${numberInput.toLocaleString("es-ES", { style: "currency", currency: "EUR", minimumFractionDigits: 2 })}

Switzerland: ${numberInput.toLocaleString("de-CH", { style: "currency", currency: "CHF", minimumFractionDigits: 2 })}

`


// End of Expression


 
 
 

Comments

bottom of page