Intl.PluralRules is an API used in JavaScript to judge plural numbers based on the locale, solving the problem of different plural rules in multi-lingual environments. Unlike the hard-coded splicing "s", it supports complex plural classifications in multiple languages, such as zero, one, two, few, etc. in Arabic. When using it, first create an instance and call the select method to obtain the classification, and then select the corresponding copy from the predefined map. Commonly found in scenarios such as number of comments, shopping cart prompts and notification messages. It can be combined with the i18n library or implemented lightweight solutions on its own, and dynamic text display can be realized through structured data combined with replacement logic. It is important to note that the plural categories supported by each language are different, and the API should be relied on instead of manual judgment, and browser compatibility should be considered, especially IE does not support it.

Sometimes you may want to display different text on the web page according to the number, such as "1 item" and "2 items". Many people directly hardcode and add "s", but when they really want to be internationalized, you will find that the plural rules of different languages vary greatly. JavaScript provides a built-in way: Intl.PluralRules , which can help you handle this type of problem more accurately.

What is Intl.PluralRules ?

Intl.PluralRules is an API in JavaScript that determines which plural form a certain number belongs to in a specific locale. Unlike English, there are only two cases of singularity and plurality, some languages (such as Arabic) have separate categories such as "zero", "one", "two", and "several multiple".

It's easy to use:

 const pluralRules = new Intl.PluralRules('ar-EG'); // Arabic (Egypt)
console.log(pluralRules.select(0)); // Return 'zero'
console.log(pluralRules.select(1)); // Return 'one'
console.log(pluralRules.select(2)); // Return 'two'
console.log(pluralRules.select(5)); // Return 'few'

You can select the appropriate copy from the predefined language map based on the returned type (such as 'one' , 'other' , etc.).

Common usage scenarios

• Show comment count: "1 comment" vs. "3 comments"
• Shopping cart tip: Users see "You have 0 items" or "You have 1 item"
• Dynamically generate messages: "No notification", "1 new notification", "5 notifications"

These seemingly simple text changes actually directly affect the user experience. If you only rely on splicing strings, it is easy to make mistakes, especially in multilingual projects.

How to use it in conjunction with the translation system?

If you use i18n libraries like react-i18next or formatjs , they already encapsulate complex logic inside. But if you want to implement a lightweight solution yourself, you can organize the data structure like this:

 {
  "en-US": {
    "items": {
      "one": "1 item",
      "other": "{count} items"
    }
  },
  "ar-EG": {
    "items": {
      "zero": "?? ???? ?????",
      "one": "???? ????",
      "two": "??????",
      "few": "{count} ????? ?????",
      "many": "{count} ??????",
      "other": "{count} ????"
    }
  }
}

Then take the value according to the current language and plural types:

 function getPluralMessage(locale, key, count) {
  const rules = new Intl.PluralRules(locale);
  const category = rules.select(count);
  return translations[locale][key][category].replace('{count}', count);
}

The advantage of this method is that it has clear structure, easy maintenance, and easy access to back-end interfaces or translation tools.

Details to be paid attention to when using

• The plural categories supported by different languages are different. Common ones include: zero , one , two , few , many , other
• English mainly uses one and other , and Chinese generally only uses other
• Don't write the judgment logic manually, it should be handed over to Intl.PluralRules for processing
• If your application only needs to support several languages, you can check the plural types supported by each language first to avoid missing out
• The browser compatibility is basically fine, IE does not support it, and modern browsers support it

Basically that's it. Intl.PluralRules is not complicated, but is very practical when actually working on multilingual projects, especially if you don't want to rely on third-party libraries.

The above is the detailed content of Using JavaScript Plural Rules for Internationalization. For more information, please follow other related articles on the PHP Chinese website!