Let's see how we can add ordinal suffixes to number values in Javascript.
For example:
1 becomes 1st
6 becomes 6th
33 becomes 33rd
50 becomes 50th
Adding ordinal suffixes to numbers using Intl.PluralRules()
We have the Javascript Intl
library that is like a swiss army knife toolbox for all kinds of string formating issues.
For our case, we want to use Intl.PluralRules()
.
By default Intl.PluralRules()
will start with a cardinal default and returns the following:
const plurals = Intl.PluralRules();
plurals.select(0) // Returns "other"
plurals.select(1) // Returns "one"
plurals.select(2) // Returns "other"
But we can set it to ordinal and the out will be:
const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' });
plurals.select(0); // Returns "other"
plurals.select(1); // Returns "one"
plurals.select(2); // Returns "two"
plurals.select(3); // Returns "few"
Based on this we can make the following function to add suffixes such as "st" or "nd" to Javascript numbers:
let getNumberWithSuffix = (n) => {
const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' });
let suffixMap = {
"one" : "st",
"two" : "nd",
"few" : "rd",
"other" : "th"
}
return suffixMap[plurals.select(item)]
}
getNumberWithSuffix(13) // return 13th
getNumberWithSuffix(22) // return 22nd
getNumberWithSuffix(133) // return 133rd
The folks from egghead.io have a great article that gets into more detail about the Intl API and what we can do with it.
The Intl.PluralRules() is fully supported in all major browsers.
Adding ordinals suffixes to Javascript numbers without the Intl library
We can also write a plain old function to add the "st", "nd", "rd" or "th" suffixes to Javascript numbers":
const getNumberWithSuffix = (n)=> {
const s = ["th", "st", "nd", "rd"];
const v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
However, this approach may need to be changed for other languages.
By the way, here is the full list of rules for adding ordinal suffixes to numbers.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.