In Javascript, it's usually considered best practice to work with absolute numbers, as is a defined type. However, when expressing these numbers in user interfaces, it's more likely we'll want to express them differently. For example, consider I have the following list of numbers. I want to still store them as numbers, but then add , , , or when showing them to the user: number nd st rd th let x = [ 1, 13, 22, 100, 1204, 133 ]; I could of course do this manually, and store each number of a specific prefix, or define custom rules, but this gets a little messy - and what if I need to support multiple languages? Although in english we write to represent place, this may not be the same in other languages. 3rd 3rd Fortunately there is a solution in Javascript - the use of . This will define plural Intl.PluralRules rules based on locale: let plurals = Intl.PluralRules(); let x = plurals.select(0) // Returns "other" let y = plurals.select(1) // Returns "one" let z = plurals.select(2) // Returns "other" By default, is configured as , which means anything above 1 is considered plural. Above, as you can see, lets us differentiate whether a number is plural or not. PluralRules cardinal PluralRules Things get more interesting when we set it to , which takes into consideration the ways we use numbers. Here, it will tell us language specific rules on how to handle each number - so we can do things like , , and ordinal 2nd 3rd 4th const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' }); let a = plurals.select(0); // Returns "other" let b = plurals.select(1); // Returns "one" let c = plurals.select(2); // Returns "two" let d = plurals.select(3); // Returns "few" let e = plurals.select(4); // Returns "other" Now we can customize our outputs based on locale, so we don't run into weird issues. Here, we're using , but any other valid locale will also work. To map our numbers to , , , etc, we only have to create a mapping like this: en-US 1st 2nd 3rd let x = [ 1, 13, 22, 100, 1204, 133 ]; const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' }); let pluralMapping = { "one" : "st", "two" : "nd", "few" : "rd", "other" : "th" } let y = []; x.forEach((item) => { let getPlural = plurals.select(item); let pluralEnding = pluralMapping[getPlural] y.push(`${item}${pluralEnding}`) }) console.log(y); // ['1st', '13th', '22nd', '100th', '1204th', '133rd'] Also Published here
