Language Display Names in the Intl Library

JavaScript
4 minutes read

Introduction

Hello, developers! Today, we’re going to discuss the Language Display Names. Have you ever noticed when you use an app or a website, it asks you to pick a language? The names you see – like English, Español, or Français – are Language Display Names.

These friendly names are a big part of making software accessible to people worldwide. They help visitors feel welcome and understand the software in their own language.

In this article, we’ll understand what Language Display Names are, why they matter, and how they work. Let’s get started!

The Role of Internationalization in Software Development

Internationalization (i18n) in software development refers to the process of designing and preparing your application to be adaptable to different languages, regions, and cultures. Essential considerations include language adaptation, date and time formats, currency, and more.

Language codes, such as en for English or fr for French, are a crucial aspect of internationalization. These codes, typically following the ISO 639-1 standard, facilitate the correct display of content in the user’s preferred language.

For example, the following JavaScript code determines the language setting of a user’s browser and stores it in the userLang variable. 

// Example of language code usage in JavaScript
let userLang = navigator.language || navigator.userLanguage; 
alert("The language is: " + userLang);

Understanding Language Display Names

A Language Display Name is a user-friendly name of a language, often displayed in the language itself (e.g., English, Español, Français). Unlike language codes, which are more technical and used behind the scenes, Language Display Names appear in the user interface (UI), making it easier for users to select their preferred language.

When it comes to multilingual support, the display names of languages should be translated to match the language of the user interface. For example, if the UI language is set to Spanish, the English language option should be displayed as “Inglés“.

// Using the Intl library to get Language Display Names
let language = new Intl.DisplayNames(['es'], {type: 'language'});
console.log(language.of('en'));  // Output: "inglés"

Let’s take a look at one more example

let languageNames = new Intl.DisplayNames(['fr'], {type: 'language'});
console.log(languageNames.of('en'));  // Output: "anglais"
console.log(languageNames.of('ja'));  // Output: "japonais"
console.log(languageNames.of('ru'));  // Output: "russe"

In the above example, we’re creating an Intl.DisplayNames object with French ('fr') as the locale, meaning that the display names will be in French. We then use the of() method to get the French display names for English (en), Japanese (ja), and Russian (ru). The output will be anglais, japonais, and russe, respectively.

Advanced Concepts

Let’s dive into some advanced concepts that’ll help you make the most of this powerful feature.

Handling Fallbacks for Unsupported Languages

In an ideal world, every language would be universally supported. But that’s not the case, our coding landscape isn’t always that perfect. Not every language is supported by every browser, and that’s where our first advanced concept comes in: fallbacks for unsupported languages.

Here’s how you can implement it:

function getLanguageDisplayName(langCode) {
  const languageNames = new Intl.DisplayNames(['en'], {type: 'language'});
  let displayName = languageNames.of(langCode);

  // Fallback for unsupported languages
  if (displayName === langCode) {
    displayName = 'Default Language';  // Or any other fallback language display name
  }
  
  return displayName;
}

console.log(getLanguageDisplayName('fr'));  // French
console.log(getLanguageDisplayName('xyz')); // Default Language

In this example, we have a function called getLanguageDisplayName that accepts a language code as an argument. If the input language code isn’t recognized, Intl.DisplayNames returns the same code. In such cases, we treat it as an unsupported language and fall back to a default language display name.

This way, even with unsupported languages, our function will always return a sensible language display name, providing a better user experience in our applications.

Performance Considerations

While Intl.DisplayNames is pretty performant right out of the box, there are still some tips and tricks you can employ to ensure your code runs as fast as lightning.

For instance, if you’re frequently accessing the names of the same languages, consider caching the results to avoid unnecessary computations. Here’s how:

let cache = {};

function getDisplayName(lang) {
  if (cache[lang]) {
    return cache[lang];
  }
  
  const languageNames = new Intl.DisplayNames(['en'], {type: 'language'});
  const displayName = languageNames.of(lang);
  
  cache[lang] = displayName;
  return displayName;
}

console.log(getDisplayName('fr'));  // French
console.log(getDisplayName('fr'));  // Fetches from cache

In the above code snippet, we’re using a cache object to store the display names of languages we’ve already fetched. Now, every time you call getDisplayName('fr'), it will return the value from the cache instead of recalculating it, boosting your code’s performance.

Tips and Tricks

Now, we’ll cover some valuable tips and tricks that’ll supercharge your usage of Intl.DisplayNames. So, let’s get started!

Exploit the Locale Preference Order

Did you know that the Intl.DisplayNames constructor accepts not just one, but an array of locale strings? Yes, it does! And the order of the locales matters. JavaScript will use the first locale that it recognizes.

const languageNames = new Intl.DisplayNames(['es', 'en'], {type: 'language'});
console.log(languageNames.of('fr'));  
// expected output: "francés"

Here, es (Spanish) is preferred over en (English). If Spanish was not supported, it would have fallen back to English.

Use Consistent Language Codes

When using Intl.DisplayNames, it’s crucial to use language codes consistently. Whether it’s the two-letter ISO 639-1 codes (en, fr, de) or the longer ISO 639-2 codes (eng, fra, deu), just make sure you stick with one set.

Leverage Other Display Types

While we’ve been focusing on language display names, Intl.DisplayNames also supports region, script, and currency display names. It’s a versatile tool in your toolbox, and it’s worth exploring these other types depending on the needs of your application.

const currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'});
console.log(currencyNames.of('USD'));  
// expected output: "US Dollar"

Further Reading

Conclusion

In conclusion, Language Display Names are an essential component of software internationalization, enriching the user experience and catering to global audiences. For developers, understanding and correctly implementing these names is a worthwhile investment. Their impact on the user experience is profound, helping make the software more intuitive and user-friendly. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *