JavaScript Tutorial ✦
Internationalization (i18n)
🌐 What is Internationalization (i18n) in JavaScript?
Internationalization, also called i18n (because there are 18 letters between "i" and "n"), is the process of making an application usable by people from different languages, cultures, and environments — without having to rebuild the app from scratch each time.
Just imagine your website is visited by users from different places like Germany, Italy, Norway, or the USA. Each user may prefer a different language like German, Spanish, or English, and their date and time formats will also vary depending on where they are. In this situation, internationalization helps handle everything smoothly.
We can use helpful libraries like FormatJS, React-Intl, etc., to make internationalization easier and more effective.
🌍 Simple FAQs on Internationalization (i18n)
1. What’s the difference between i18n and l10n?
- i18n: Making your app ready to support many languages and regions.
- l10n: Actually translating the content and adjusting for a specific language or culture.
2. Why is it called i18n or l10n?
Because of the number of letters between the first and last:
i18n= internationalization → 18 letters in between.l10n= localization → 10 letters in between.
3. How do I add multiple languages to my app?
- Create separate files for each language (like
english.json,french.json). - Use a button or menu to switch between them.
- Try using libraries like i18next or react-intl to handle it easily.
4. How do I show dates, numbers, or money correctly?
Use JavaScript’s built-in Intl API:
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(2500)
// Shows: "2 500,00 €"
5. Can my app find out the user’s language automatically?
Yes! You can check the browser's language like this:
navigator.language // Example: "en-US"
6. What problems might I face with i18n?
- Languages that go right-to-left (like Arabic or Hebrew).
- Plural rules (like “1 cat” vs. “2 cats”).
- Different date or currency formats.
- Keeping translations up to date when you update your app.
7. How should I organize translation files?
Use easy-to-read JSON files like this:
// en.json
{
"hello": "Hello",
"welcome": "Welcome to our app"
}
8. Can I write text directly in my code?
No, it's better to keep all your text in translation files. That way, it's much easier to manage later if you want to support more languages.
9. What tools help with translations?
- i18next – Great for React and plain JavaScript apps.
- Locize, Crowdin, or Phrase – Online platforms that help teams manage translation content easily.
10. Do I need i18n if my app is only in one language?
Not right now. But it's smart to plan for i18n from the start so it's easier to add more languages in the future without breaking your app.
//example 1
const messages = {
en: { greeting: "Hello" },
fr: { greeting: "Bonjour" },
hi: { greeting: "नमस्ते" }
};
// example 2
const lang = "fr";
console.log(messages[lang].greeting); // Bonjour
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Date().toLocaleDateString('fr-FR', options)); // French date format