On this tutorial, you’ll discover ways to convert numbers to ordinals in JavaScript. Getting the ordinal of a quantity lets you show it in a humanreadable format.
What Are Ordinals?
Ordinals outline numbers as being a part of an order or sequence. The phrases “first”, “second”, and “third” are all examples of ordinals. When utilizing numbers to show chart outcomes, days of the month, or a rating, you’ll usually want to make use of ordinals.
Numbers can be utilized to show many alternative types of data and outcomes. When numbers are introduced to customers, they usually want be introduced in a format that’s extra readable — resembling including ordinal suffix (“June twelfth” moderately than “June 12”, for instance).
Ordinal Suffix Guidelines in English
Let’s check out how ordinals are used within the English language. English ordinals comply with a predictable, if not fantastically easy, algorithm:

“st” is appended to 1 and numbers which are one larger than a a number of of ten, apart from 11 and numbers which are 11 larger than a a number of of 100. For instance, 1st, twenty first, thirty first, and so forth. … however eleventh, 111th, and so forth.

“nd” is appended to 2 and numbers which are two larger than a a number of of ten, apart from 12 and numbers which are 12 larger than a a number of of 100. For instance, 2nd, twenty second, thirty second, and so forth. … however twelfth, 112th, and so forth.

“rd” is appended to three and numbers which are three larger than a a number of of ten, apart from 13 and numbers which are 13 larger than a a number of of 100. For instance, third, twenty third, thirty third, and so forth. … however thirteenth, 113th, and so forth.

“th” is appended to the whole lot else. For instance, twenty fourth.
The right way to Get the Ordinal of a Quantity
To get the ordinal of a quantity, you should utilize the next operate:
operate getOrdinal(n)
let ord = 'th';
if (n % 10 == 1 && n % 100 != 11)
ord = 'st';
else if (n % 10 == 2 && n % 100 != 12)
ord = 'nd';
else if (n % 10 == 3 && n % 100 != 13)
ord = 'rd';
return ord;
The operate getOrdinal
accepts an argument that may be a quantity and returns the ordinal of that quantity. Since most ordinals finish in “th”, the default worth of ord
is about to th
. Then, you take a look at the quantity on completely different circumstances and alter the ordinal if needed.
You’ll discover that in every of the circumstances the remainder (%) operator is used. This operator returns the leftover worth of dividing the left operand by the proper operand. For instance, 112 % 100
returns 12
.
To check if the quantity ought to have the ordinal st
, you verify if n
is one larger than a a number of of ten (n % 10 == 1
, which incorporates 1 itself), however isn’t 11 larger than a a number of of 100 (n % 100 != 11
, which incorporates 11 itself).
To check if the quantity ought to have the ordinal nd
, you verify if n
is 2 larger than a a number of of ten (n % 10 == 2
which incorporates 2 itself), however isn’t 12 larger than a a number of of 100 (n % 100 != 12
, which incorporates 12 itself).
To check if the quantity ought to have the ordinal rd
, you verify if n
is 3 larger than a a number of of ten (n % 10 == 3
, which incorporates 3 itself), however isn’t 13 larger than a a number of of 100 (n % 100 != 13
, which incorporates 13 itself).
If all the circumstances are false, then the worth of ord
stays th
.
You may take a look at it in reside motion with the next CodePen demo.
See the Pen
Get the Ordinal of a Number by SitePoint (@SitePoint)
on CodePen.
Conclusion
On this tutorial, you’ve realized how one can retrieve the ordinal of a quantity. Ordinals can be utilized in number of circumstances, resembling displaying dates or rating in humanreadable codecs.
Should you discovered this text helpful, you may additionally get pleasure from the next: