On this tutorial, you’ll learn convert numbers to ordinals in JavaScript. Getting the ordinal of a number permits you to display it in a human-readable format.

What Are Ordinals?

Ordinals define numbers as being a part of an order or sequence. The words “first”, “second”, and “third” are all examples of ordinals. When using numbers to display chart results, days of the month, or a rating, you’ll often need to make use of ordinals.

Numbers might be used to display many differing kinds of information and results. When numbers are presented to users, they often need be presented in a format that’s more readable — akin to adding ordinal suffix (“June twelfth” somewhat than “June 12”, for instance).

Ordinal Suffix Rules in English

Let’s take a have a look at how ordinals are utilized in the English language. English ordinals follow a predictable, if not beautifully easy, algorithm:

• “st” is appended to 1 and numbers which can be one greater than a multiple of ten, apart from 11 and numbers which can be 11 greater than a multiple of 100. For instance, 1st, twenty first, thirty first, etc. … but eleventh, 111th, etc.

• “nd” is appended to 2 and numbers which can be two greater than a multiple of ten, apart from 12 and numbers which can be 12 greater than a multiple of 100. For instance, 2nd, twenty second, thirty second, etc. … but twelfth, 112th, etc.

• “rd” is appended to three and numbers which can be three greater than a multiple of ten, apart from 13 and numbers which can be 13 greater than a multiple of 100. For instance, third, twenty third, thirty third, etc. … but thirteenth, 113th, etc.

• “th” is appended to every thing else. For instance, twenty fourth.

How one can Get the Ordinal of a Number

To get the ordinal of a number, you should utilize the next function:

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;
}

The function getOrdinal accepts an argument that could be a number and returns the ordinal of that number. Since most ordinals end in “th”, the default value of ord is about to th. Then, you test the number on different conditions and alter the ordinal if mandatory.

You’ll notice that in each of the conditions the rest (%) operator is used. This operator returns the leftover value of dividing the left operand by the fitting operand. For instance, 112 % 100 returns 12.

To check if the number must have the ordinal st, you check if n is one greater than a multiple of ten (n % 10 == 1, which incorporates 1 itself), but isn’t 11 greater than a multiple of 100 (n % 100 != 11, which incorporates 11 itself).

To check if the number must have the ordinal nd, you check if n is 2 greater than a multiple of ten (n % 10 == 2 which incorporates 2 itself), but isn’t 12 greater than a multiple of 100 (n % 100 != 12, which incorporates 12 itself).

To check if the number must have the ordinal rd, you check if n is 3 greater than a multiple of ten (n % 10 == 3, which incorporates 3 itself), but isn’t 13 greater than a multiple of 100 (n % 100 != 13, which incorporates 13 itself).

If all the conditions are false, then the worth of ord stays th.

You may test it in live 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 learned retrieve the ordinal of a number. Ordinals might be utilized in number of cases, akin to displaying dates or rating in human-readable formats.

In the event you found this text useful, you might also benefit from the following: