Add st nd rd and th ordinal suffix to a number

Question

I would like to dynamically generate a string of text based on a current day  So  for example  if it is day 1 then I would like my code to generate    Its the  lt dynamic gt 1  lt dynamic string gt st lt  dynamic string gt   lt  dynamic gt     There are 12 days in total so I have done the following    I ve set up a for loop which loops through the 12 days  In my html I have given my element a unique id with which to target it  see below    lt h1 id  dynamicTitle  class  CustomFont leftHeading shadow  gt On The  lt span gt  lt  span gt   lt em gt of rest of generic text lt  em gt  lt  h1 gt   Then  inside my for loop I have the following code       dynamicTitle span   html i   var day   i  if  day    1        day   i    st     else if  day    2        day   i    nd    else if  day    3        day   i    rd       UPDATE  This is the entire for loop as requested     document  ready function          for  i   1  i  lt   12  i              var classy               if  daysTilDate i   19   gt  0                classy    future                   Day    i  addClass classy                   mainHeading   html                      title   html                      description   html                else if  daysTilDate i   19   lt  0                classy    past                   Day    i  addClass classy                   title   html                      description   html                      mainHeading   html                      cta   css  display    none                    Day    i      prizeLink   attr  href        i     html              else               classy    current                   Day    i  addClass classy                   title   html headings i - 1                    description   html descriptions i - 1                    cta   css  display    block                    dynamicImage   attr  src          i     jpg                    mainHeading   html                      claimPrize   attr  href        i     html                    dynamicTitle span   html i               var day   i              if  day    1                    day   i    st                 else if  day    2                    day   i    nd                else if  day    3                    day   i    rd                else if  day

User · Answer

I strongly recommend this  it is super easy and straightforward to read  I hope it help    It avoid the use of negative integer i e number less than 1 and return false It return 0 if input is 0    function numberToOrdinal n       let result     if n  lt  0       return false     else if n     0       result    0      else if n  gt  0        let nToString   n toString        let lastStringIndex   nToString length-1      let lastStringElement   nToString lastStringIndex        if  lastStringElement     1   amp  amp  n   100     11          result   nToString    st        else if  lastStringElement     2   amp  amp  n   100     12          result   nToString    nd        else if  lastStringElement     3   amp  amp  n   100     13          result   nToString    rd        else        result   nToString    th                 return result     console log numberToOrdinal -111    console log numberToOrdinal 0    console log numberToOrdinal 11    console log numberToOrdinal 15    console log numberToOrdinal 21    console log numberToOrdinal 32    console log numberToOrdinal 43    console log numberToOrdinal 70    console log numberToOrdinal 111    console log numberToOrdinal 300    console log numberToOrdinal 101      OUTPUT  false 0 11th 15th 21st 32nd 43rd 70th 111th 300th 101st

User · Answer

Here is another option    x000D   x000D  function getOrdinalSuffix day    x000D           x000D      if    2-3  1   test day    x000D       return  st   x000D        else if    2-3  2   test day    x000D       return  nd   x000D        else if    2-3  3   test day    x000D       return  rd   x000D        else   x000D       return  th   x000D        x000D           x000D    x000D       x000D  console log getOrdinalSuffix  1     x000D  console log getOrdinalSuffix  13     x000D  console log getOrdinalSuffix  22     x000D  console log getOrdinalSuffix  33     x000D   x000D   x000D    Notice the exception for the teens  Teens are so akward   Edit  Forgot about 11th and 12th

User · Answer

Strongly recommend the excellent date-fns library   Fast  modular  immutable  works with standard dates   import   as DateFns from  date-fns    const ordinalInt   DateFns format someInt   do      See date-fns docs  https   date-fns org v2 0 0-alpha 9 docs format

User · Answer

By splitting the number into an array and reversing we can easily check the last 2 digits of the number using array 0  and array 1     If a number is in the teens array 1    1 it requires  th    function getDaySuffix num        var array         num  split     reverse       E g  123   array  3   2   1        if  array 1      1        Number is in the teens         switch  array 0                 case  1   return  st               case  2   return  nd               case  3   return  rd                        return  th

User · Answer

Old one I made for my stuff     function convertToOrdinal number       if  number   1           var numberastext   number ToString            var endchar   numberastext Substring numberastext Length - 1           if  number gt 9               var secondfromendchar   numberastext Substring numberastext Length - 1               secondfromendchar   numberastext Remove numberastext Length - 1                     var suffix    th           var digit   int Parse endchar           switch  digit               case 3                  if secondfromendchar     1                        suffix    rd                       break                                case 2                  if secondfromendchar     1                        suffix    nd                       break                                case 1                  if secondfromendchar     1                        suffix    st                       break                                default                  suffix    th                   break                         return number suffix             else               return

User · Answer

You can use the moment libraries local data functions   Code    moment localeData   ordinal 1    1st

User · Answer

From Shopify   x000D   x000D  function getNumberWithOrdinal n    x000D    var s     th    st    nd    rd    x000D        v   n   100  x000D    return n    s  v - 20    10     s v     s 0    x000D    x000D   x000D   -4 -1 0 1 2 3 4 10 11 12 13 14 20 21 22 100 101 111  forEach  x000D    n   gt  console log n     - gt      getNumberWithOrdinal n   x000D     x000D   x000D   x000D

User · Answer

An alternative version of the ordinal function could be as follows   function toCardinal num        var ones   num   10      var tens   num   100       if  tens  lt  11    tens  gt  13            switch  ones                case 1                  return num    st               case 2                  return num    nd               case 3                  return num    rd                        return num    th       The variables are named more explicitly  uses camel case convention  and might be faster

User · Answer

I wrote this function to solve this problem      this is for adding the ordinal suffix  turning 1  2 and 3 into 1st  2nd and 3rd Number prototype addSuffix function        var n this toString   split      0       var lastDigits n substring n length-2         add exception just for 11  12 and 13     if lastDigits    11     lastDigits    12     lastDigits    13            return this  th             switch n substring n length-1            case  1   return this  st           case  2   return this  nd           case  3   return this  rd           default   return this  th              With this you can just put  addSuffix   to any number and it will result in what you want  For example   var number 1234  console log number addSuffix        console will show  1234th

User · Answer

function ordsfx a  return  th   st   nd   rd    a    a lt 0 -a a  100  gt 10 amp  amp a lt 14   a  10  gt 3 0 a    See annotated version at https   gist github com furf 986113 file-annotated-js  Short  sweet  and efficient  just like utility functions should be  Works with any signed unsigned integer float   Even though I can t imagine a need to ordinalize floats

User · Answer

You ve only got 12 days  I d be tempted to make it just a simple lookup array   var suffixes        st   nd   rd   th   th   th   th   th   th   th   th   th      then   var i   2  var day   i   suffixes i      result   2nd    or  var i   8  var day   i   suffixes i      result   8th

User · Answer

x000D   x000D   lt p gt 31 lt sup gt st lt  sup gt  March 2015 lt  p gt  x000D   x000D   x000D    You can use  1 lt sup gt st lt  sup gt  2 lt sup gt nd lt  sup gt  3 lt sup gt rd lt  sup gt  4 lt sup gt th lt  sup gt   for positioning the suffix

User · Answer

function getSuffix n   return n  lt  11    n  gt  13     st    nd    rd    th   Math min  n - 1    10  3      th

User · Answer

I wrote this simple function the other day   Although for a date you don t need the larger numbers  this will cater for higher values too  1013th  36021st etc      var fGetSuffix   function nPos        var sSuffix            switch  nPos   10           case 1              sSuffix    nPos   100     11     th     st               break          case 2              sSuffix    nPos   100     12     th     nd               break          case 3              sSuffix    nPos   100     13     th     rd               break          default              sSuffix    th               break             return sSuffix

User · Answer

This is for one liners and lovers of es6  let i  new Date   getDate      I can be any number  for future sake we ll use 9  const j   I   10  const k   I   100   i      i   j     1  amp  amp   k     11    st    j     2  amp  amp  k     12    nd    j     3  amp  amp  k     13    rd     th      console log i    9th   Another option for  be number would be   console log   st   nd   rd     i 90  100-10  10-1    th     Also to get rid of the ordinal prefix just use these   console log i parseInt  8th     console log i parseFloat  8th      feel free to modify to suit you need

User · Answer

The rules are as follows         st is used with numbers ending in 1  e g  1st  pronounced first    nd is used with numbers ending in 2  e g  92nd  pronounced ninety-second    rd is used with numbers ending in 3  e g  33rd  pronounced thirty-third    As an exception to the above rules  all the  teen  numbers ending with 11  12 or 13 use -th  e g  11th  pronounced eleventh  112th    pronounced one hundred  and  twelfth    th is used for all other numbers  e g  9th  pronounced ninth        The following JavaScript code  rewritten in Jun  14  accomplishes this   function ordinal suffix of i        var j   i   10          k   i   100      if  j    1  amp  amp  k    11            return i    st             if  j    2  amp  amp  k    12            return i    nd             if  j    3  amp  amp  k    13            return i    rd             return i    th       Sample output for numbers between 0-115     0  0th   1  1st   2  2nd   3  3rd   4  4th   5  5th   6  6th   7  7th   8  8th   9  9th  10  10th  11  11th  12  12th  13  13th  14  14th  15  15th  16  16th  17  17th  18  18th  19  19th  20  20th  21  21st  22  22nd  23  23rd  24  24th  25  25th  26  26th  27  27th  28  28th  29  29th  30  30th  31  31st  32  32nd  33  33rd  34  34th  35  35th  36  36th  37  37th  38  38th  39  39th  40  40th  41  41st  42  42nd  43  43rd  44  44th  45  45th  46  46th  47  47th  48  48th  49  49th  50  50th  51  51st  52  52nd  53  53rd  54  54th  55  55th  56  56th  57  57th  58  58th  59  59th  60  60th  61  61st  62  62nd  63  63rd  64  64th  65  65th  66  66th  67  67th  68  68th  69  69th  70  70th  71  71st  72  72nd  73  73rd  74  74th  75  75th  76  76th  77  77th  78  78th  79  79th  80  80th  81  81st  82  82nd  83  83rd  84  84th  85  85th  86  86th  87  87th  88  88th  89  89th  90  90th  91  91st  92  92nd  93  93rd  94  94th  95  95th  96  96th  97  97th  98  98th  99  99th 100  100th 101  101st 102  102nd 103  103rd 104  104th 105  105th 106  106th 107  107th 108  108th 109  109th 110  110th 111  111th 112  112th 113  113th 114  114th 115  115th

User · Answer

Intl PluralRules  the standard method  I would just like to drop the canonical way of doing this in here  as nobody seems to know it  If you want your code to be  self-documenting easy to understand with the modern standard  - this is the way to go   x000D   x000D  const english ordinal rules   new Intl PluralRules  en    type   ordinal     const suffixes         one   st       two   nd       few   rd       other   th     function ordinal number        const suffix   suffixes english ordinal rules select number        return  number   suffix      const test   Array 201       fill        map     index    gt  index - 100       map ordinal       join       console log test   x000D   x000D   x000D    The Intl PluralRules constructor  Draft ECMA-402  Unicode   s six plural categories

User · Answer

Here s a slightly different approach  I don t think the other answers do this   I m not sure whether I love it or hate it  but it works   export function addDaySuffix day  number       const suffixes            stndrdthththththththththththththththththstndrdthththththththst       const startIndex   day   2       return    day   suffixes substring startIndex  startIndex   2

User · Answer

Minimal one-line approach for ordinal suffixes  function nth n  return  st   nd   rd     n 90  100-10  10-1    th      this is for positive integers  see below for other variations   Explanation  Start with an array with the suffixes   st    nd    rd    We want to map integers ending in 1  2  3  but not ending in 11  12  13  to the indexes 0  1  2   Other integers  including those ending in 11  12  13  can be mapped to anything else mdash indexes not found in the array will evaluate to undefined  This is falsy in javascript and with the use of logical or      th   the expression will return  th  for these integers  which is exactly what we want   The expression   n   90    100 - 10    10 - 1 does the mapping  Breaking it down     n   90    100  This expression takes the input integer  minus  10 mod 100  mapping 10 to 0      99 to 89  0 to 90       9 to 99  Now the integers ending in 11  12  13 are at the lower end  mapped to 1  2  3   - 10  Now 10 is mapped to  minus 10  19 to  minus 1  99 to 79  0 to 80      9 to 89  The integers ending in 11  12  13 are mapped to negative integers   minus 9   minus 8   minus 7     10  Now all integers ending in 1  2  or 3 are mapped to 1  2  3  All other integers are mapped to something else  11  12  13 are still mapped to  minus 9   minus 8   minus 7   - 1  Subtracting one gives the final mapping of 1  2  3 to 0  1  2    Verifying that it works   x000D   x000D  function nth n  return  st   nd   rd     n 90  100-10  10-1    th   x000D   x000D    test integers from 1 to 124 x000D  for var r       i   1  i  lt  125  i    r push i   nth i    x000D   x000D    output result x000D  document getElementById  result   innerHTML   r join   lt br gt     x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D    Variations  Allowing negative integers   function nth n  return  st   nd   rd      n lt 0 -n n  90  100-10  10-1    th     In ES6 fat arrow syntax  anonymous function    n  gt   st   nd   rd      n lt 0 -n n  90  100-10  10-1    th    Update  An even shorter alternative for positive integers is the expression     st   nd   rd   n 100 gt  gt 3 1 amp  amp n 10    th    See this post for explanation   Update 2     st   nd   rd   n 10 10 1 amp  amp n 10    th

User · Answer

I wrote this function for higher numbers and all test cases  function numberToOrdinal num        if  num     0            return  0             let i   num toString    j   i slice i length - 2   k   i slice i length - 1       if  j  gt   10  amp  amp  j  lt   20            return  i    th         else if  j  gt  20  amp  amp  j  lt  100            if  k    1                return  i    st             else if  k    2                return  i    nd             else if  k    3                return  i    rd             else               return  i    th                   else if  j    1            return  i    st         else if  j    2            return  i    nd         else if  j    3            return  i    rd         else           return  i    th

User · Answer

I wanted to provide a functional answer to this question to complement the existing answer   const ordinalSuffix     st    nd    rd   const addSuffix   n   gt  n    ordinalSuffix  n - 1    10      th   const numberToOrdinal   n   gt     n   match  1 d      n    th    addSuffix n    we ve created an array of the special values  the important thing to remember is arrays have a zero based index so ordinalSuffix 0  is equal to  st     Our function numberToOrdinal checks if the number ends in a teen number in which case append the number with  th  as all then numbers ordinals are  th   In the event that the number is not a teen we pass the number to addSuffix which adds the number to the ordinal which is determined by if the number minus 1  because we re using a zero based index  mod 10 has a remainder of 2 or less it s taken from the array  otherwise it s  th    sample output    numberToOrdinal 1     1st numberToOrdinal 2     2nd numberToOrdinal 3     3rd numberToOrdinal 4     4th numberToOrdinal 5     5th numberToOrdinal 6     6th numberToOrdinal 7     7th numberToOrdinal 8     8th numberToOrdinal 9     9th numberToOrdinal 10     10th numberToOrdinal 11     11th numberToOrdinal 12     12th numberToOrdinal 13     13th numberToOrdinal 14     14th numberToOrdinal 101     101st

[javascript] Add st, nd, rd and th (ordinal) suffix to a number

Examples related to javascript

Examples related to jquery

Examples related to numbers