On this tutorial, you’ll learn to convert numbers to ordinals in JavaScript. Getting the ordinal of a quantity means that you can 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 various forms of information and outcomes. When numbers are introduced to customers, they usually want be introduced in a format that’s extra readable — reminiscent of including ordinal suffix (“June twelfth” relatively 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 can be one better than a a number of of ten, aside from 11 and numbers which can be 11 better than a a number of of 100. For instance, 1st, twenty first, thirty first, and many others. … however eleventh, 111th, and many others.

“nd” is appended to 2 and numbers which can be two better than a a number of of ten, aside from 12 and numbers which can be 12 better than a a number of of 100. For instance, 2nd, twenty second, thirty second, and many others. … however twelfth, 112th, and many others.

“rd” is appended to three and numbers which can be three better than a a number of of ten, aside from 13 and numbers which can be 13 better than a a number of of 100. For instance, third, twenty third, thirty third, and many others. … however thirteenth, 113th, and many others.

“th” is appended to all the pieces else. For instance, twenty fourth.
Easy methods to Get the Ordinal of a Quantity
To get the ordinal of a quantity, you should use the next perform:
perform 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 perform 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 ready 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 the rest (%) operator is used. This operator returns the leftover worth of dividing the left operand by the appropriate operand. For instance, 112 % 100
returns 12
.
To check if the quantity ought to have the ordinal st
, you verify if n
is one better than a a number of of ten (n % 10 == 1
, which incorporates 1 itself), however isn’t 11 better 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 better than a a number of of ten (n % 10 == 2
which incorporates 2 itself), however isn’t 12 better 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 better than a a number of of ten (n % 10 == 3
, which incorporates 3 itself), however isn’t 13 better than a a number of of 100 (n % 100 != 13
, which incorporates 13 itself).
If the entire circumstances are false, then the worth of ord
stays th
.
You possibly can take a look at it in reside motion with the next CodePen demo.
See the Pen
Get the Ordinal of a Quantity 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 instances, reminiscent of displaying dates or rating in humanreadable codecs.
Should you discovered this text helpful, you might also take pleasure in the next: