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

Too Long; Didn't Read

 Add passwordless user experiences to your app

HackerNoon Mobile

JavaScript Ordinals: Adding st, nd, rd and th Suffixes to a Number

Too Long; Didn't Read

@smpnjn

RELATED STORIES