Add support for ordinals

[waylaidwanderer]

I don't see any way of translating ordinals with this (e.g. 1st, 2nd, 3rd, 4th).

Could this be added?

[JJBocanegra]

I'm with this same problem right now.

I think something like this could be a solution:

{
  "ORDINAL": " | st | nd | rd | th",
  "FOO": "You're in <strong>{position}@:(ORDINAL, position) position</strong>"
}

And with this getChoiceIndex():

  if (this.locale !== 'en') {
    return 0;
  }

  if (choice <= 3) {
    return choice;
  }

  if (choice > 3 && choice < 100) {
    return 4;
  }

  return 5;
};

[alt1o]

any update?

[exoego]

PRs are welcome

[MKhasib]

@kazupon @exoego Can someone tell us If we created a PR for this when it will be merged? We're going to work on it using the $n. If you can provide some guidance on what needs to be done to merge it will be great One last question: how we can add an extension to $n to include $n(number,'ordinal') or where? can you give me a concrete example? I have a solution in mind for the problem

[kazupon]

This suggestion has been posted for quite some time. There are now vue-i18n v8 and v9. v9 is here: https://github.com/intlify/vue-i18n-next

v8 is for Vue2 and v9 is for Vue3. And v8 is currently in the maintenance phase, v9 is active. If you have a solution to this suggestion, I would prefer a proposal that works with v9. If possible, it would be nice to be able to implement it for v8 as well, so we can migrate support.

[MKhasib]

@kazupon We're currently using V8. We need to integrate this to the $n as following:

Suggested solution

Suggested solution is use Intl.PluralRules that has ordinals type and let's you pick up the ordinal key using a number and a locale Example:

new Intl.PluralRules('ar-EG').select(0);
// → 'zero'
new Intl.PluralRules('ar-EG').select(1);
// → 'one'
new Intl.PluralRules('ar-EG').select(2);
// → 'two'
new Intl.PluralRules('ar-EG').select(6);
// → 'few'
new Intl.PluralRules('ar-EG').select(18);
// → 'many'

We will use this keys produced by it to then select the ordinal display using suffixes schemas for ordinals across different languages that can be found here One last thing, we will inject this solution into $n to have an 'ordinal' type that returns ${{$n(number)}}${{ordinalConversion(locale,number)}}

[MKhasib]

Just tested it in two different RTL languages (with integration to $n plugin)

[gonzamoiguer]

@MKhasib Could you provide full code or further explanation as to how to achieve $n(5,'ordinal') to work? Thanks !

[fylica]

Here is a sample code to achieve ordinals support in your project;

add this as a message (for English, obviously):

  ordinal: (ctx: { named: (arg0: string) => number }) => {
    const number = ctx.named('count');

    const suffixes: Record<number, string> = {
      1: 'st',
      2: 'nd',
      3: 'rd',
    };
    const suffix = suffixes[number % 10] || 'th';

    return `${number}${suffix}`;
  },

use it in your templates:

import { useI18n } from 'vue-i18n'

const i18n = useI18n()

i18n.t('ordinal', { count: 3 })