In this tutorial, you’ll learn how to convert numbers to ordinals in JavaScript. Once you have the ordinal of the number, you can display it in human readable form.
What is an ordinal
Ordinals define numbers as part of an order or sequence. The words “first”, “second”, and “third” are all examples of ordinal numbers. When using numbers to display chart results, dates of the month, or rankings, it is often necessary to use ordinal numbers.
Numeric values can be used to display different types of data and results. When presenting a number to the user, it is often necessary to present it in a more readable format, such as by adding an ordinal suffix (for example, “June 12th” instead of “June 12”).
English Ordinal Suffix Rules
Let’s see how ordinal numbers are used in English. Ordinal numbers in English follow a set of predictable, if not beautifully simple, rules.
-
Numbers that are one more than a multiple of 1 and 10 are marked with ‘st’. Except for 11 and 11 being a multiple of 100. For example, 1st, 21st, 31st, etc.Such
-
‘nd’ is added to numbers 2 greater than multiples of 2 and 10, except for 12 which is greater than multiples of 12 and 100.Such
-
‘rd’ is added to numbers of 3 greater than multiples of 3 and 10, except for 13 which is greater than multiples of 13 and 100.Such
-
The ‘th’ is appended to everything else. For example, 24 days.
How to get the ordinal of a number
To get the ordinal of a number you can use the following functions:
function 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;
}
function getOrdinal Accepts an argument that is a number and returns the ordinal of that number.Since most ordinal numbers end in “th”, the default value of ord is set to thThen test the numbers under different conditions and change the ordinal if necessary.
Notice that each condition uses the modulo (%) operator. This operator returns the remainder of dividing the left operand by the right operand. for example, 112 % 100 Return value 12.
To test if a number requires an ordinal stto see if n is 1 greater than a multiple of 10 (n % 10 == 1including 1 itself), provided that 11 is not greater than a multiple of 100 (n % 100 != 11which includes 11 itself).
To test if a number requires an ordinal ndto see if n 2 is greater than a multiple of 10 (n % 10 == 2 2 itself), but 12 is not greater than a multiple of 100 (n % 100 != 12which includes 12 itself).
To test if a number requires an ordinal rdto see if n 3 is greater than a multiple of 10 (n % 10 == 3including 3 itself), provided that 13 is not greater than a multiple of 100 (n % 100 != 13which includes 13 itself).
If all conditions are false, ord Remains th.
You can test it in live action with the following CodePen demo.
look at the pen
Get number ordinal in SitePoint (@SitePoint)
with a code pen.
Conclusion
In this tutorial, you learned how to get the ordinal of a number. Ordinal numbers can be used in a variety of ways, such as displaying dates and ranking in human-readable form.
If you found this article useful, you may also enjoy:
