So formatieren Sie Ordinalzahlen wie 1., 2., 3.

Einführung

Ordinalzahlen geben die Position oder den Rang in einer Reihenfolge an. Im Englischen schreibt man 1st, 2nd, 3rd, 4th, um Platzierungen in einem Rennen oder Elemente in einer Liste zu beschreiben. Diese Suffixe helfen, Ordinalzahlen von normalen Zählzahlen zu unterscheiden.

Verschiedene Sprachen verwenden völlig unterschiedliche Konventionen für Ordinalzahlen. Im Englischen werden Suffixe wie st, nd, rd und th angehängt. Französisch nutzt hochgestellte Buchstaben wie 1er und 2e. Im Deutschen wird ein Punkt nach der Zahl gesetzt, wie 1. und 2. Im Japanischen wird die Zahl mit dem Zeichen 第 vorangestellt. Wenn Sie englische Ordinal-Suffixe fest einprogrammieren, gehen Sie davon aus, dass alle Nutzer dieselbe Konvention verwenden.

JavaScript stellt die Intl.PluralRules-API mit einem Ordinaltyp bereit, um diese Unterschiede automatisch zu berücksichtigen. In dieser Lektion wird erklärt, was Ordinalzahlen sind, warum ihre Formatierung je nach Sprache variiert und wie Sie sie für jede Sprache korrekt formatieren.

Was Ordinalzahlen sind

Ordinalzahlen drücken die Position, den Rang oder die Reihenfolge in einer Sequenz aus. Sie beantworten die Frage „der wievielte“ statt „wie viele“. Die Zahlen 1st, 2nd, 3rd beschreiben Positionen in einem Rennen. First, second, third beschreiben Elemente in einer Liste.

Kardinalzahlen geben eine Menge oder Anzahl an. Sie beantworten die Frage „wie viele“. Die Zahlen 1, 2, 3 beschreiben die Anzahl von Objekten. One, two, three beschreiben Mengen.

Der gleiche Zahlenwert kann je nach Kontext beide Bedeutungen haben. Die Zahl 5 ist kardinal in „5 Äpfel“, aber ordinal in „5. Platz“. Diese Unterscheidung ist wichtig, da viele Sprachen Ordinalzahlen anders als Kardinalzahlen formatieren.

Im Englischen haben Ordinalzahlen unter 10 einzigartige Wortformen. First, second, third, fourth, fifth sind eigenständige Wörter. Ab 10 bildet das Englische Ordinalzahlen durch Hinzufügen von Suffixen. Eleventh, twelfth, twentieth, twenty-first folgen Mustern, erfordern aber Suffixe.

Beim Schreiben von Ordinalzahlen als Ziffern statt als Wörter fügt das Englische die Suffixe st, nd, rd oder th hinzu. Diese Suffixe folgen spezifischen Regeln basierend auf den letzten Ziffern der Zahl.

Warum sich die Formatierung von Ordinalzahlen je nach Gebietsschema unterscheidet

Verschiedene Sprachen haben unterschiedliche Systeme zur Darstellung von Ordinalzahlen entwickelt. Diese Konventionen spiegeln Grammatikregeln, Schriftsysteme und kulturelle Praktiken wider, die für jede Sprache einzigartig sind.

Im Englischen verwenden Ordinalzahlen vier verschiedene Suffixe. Zahlen, die auf 1 enden, verwenden st, Zahlen, die auf 2 enden, verwenden nd, Zahlen, die auf 3 enden, verwenden rd, und alle anderen Zahlen verwenden th. Allerdings verwenden Zahlen, die auf 11, 12 oder 13 enden, alle th. Dies ergibt 1st, 2nd, 3rd, 4th, 11th, 12th, 13th, 21st, 22nd, 23rd.

Im Französischen verwenden Ordinalzahlen hochgestellte Abkürzungen. Das erste Element verwendet 1er für maskulin oder 1re für feminin. Alle anderen Ordinalzahlen verwenden e hochgestellt, wie 2e, 3e, 4e. Die Formatierung umfasst hochgestellte Typografie, nicht nur Suffixbuchstaben.

Im Deutschen verwenden Ordinalzahlen einen Punkt nach der Zahl. Die Notation 1., 2., 3. steht für erste, zweite, dritte. Dieser Punkt signalisiert, dass der Lesende beim Vorlesen die entsprechende grammatikalische Endung mental hinzufügen sollte.

Im Spanischen verwenden Ordinalzahlen geschlechtsspezifische hochgestellte Indikatoren. Maskuline Ordinalzahlen verwenden 1.º, 2.º, 3.º, während feminine Ordinalzahlen 1.ª, 2.ª, 3.ª verwenden. Der Punkt trennt die Zahl vom Indikator.

Im Japanischen wird Ordinalzahlen das Präfix 第 vor der Zahl hinzugefügt. Erste, zweite, dritte erscheinen als 第一, 第二, 第三. Dieses Präfix ändert die Bedeutung von Kardinal- zu Ordinalzahl.

Wenn Sie Ordinalzahlen durch die Verkettung von Zahlen mit fest codierten Suffixen erstellen, zwingen Sie alle Benutzer, englische Konventionen zu interpretieren. Dies macht Ihre Anwendung für Personen schwerer nutzbar, die andere Formate erwarten.

Intl.PluralRules mit Ordinaltyp verstehen

Die Intl.PluralRules-API bestimmt, zu welcher Pluralkategorie eine Zahl für ein bestimmtes Gebietsschema gehört. Während diese API häufig zur Auswahl zwischen Singular- und Pluralwortformen verwendet wird, verarbeitet sie auch Ordinalzahlen.

Der Konstruktor akzeptiert eine Gebietsschema-Kennung und ein Optionsobjekt. Setzen Sie die type-Option auf "ordinal", um mit Ordinalzahlen anstelle von Kardinalzahlen zu arbeiten.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

Dies erstellt ein Regelobjekt, das englische Ordinalmuster versteht. Die select()-Methode gibt einen Kategorienamen für jede Zahl zurück, die Sie ihr übergeben.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

console.log(rules.select(1));
// Output: "one"

console.log(rules.select(2));
// Output: "two"

console.log(rules.select(3));
// Output: "few"

console.log(rules.select(4));
// Output: "other"

Die zurückgegebenen Kategorien sind linguistische Begriffe, nicht die tatsächlichen Suffixe. Die Kategorie "one" entspricht Zahlen, die im Englischen das Suffix st erhalten. Die Kategorie "two" entspricht nd-Suffixen. Die Kategorie "few" entspricht rd-Suffixen. Die Kategorie "other" entspricht th-Suffixen.

Sie ordnen diese Kategorienamen den entsprechenden Suffixen für Ihr Gebietsschema zu. Die API verarbeitet die komplexen Regeln zur Bestimmung, zu welcher Kategorie jede Zahl gehört.

Eine Ordinalformatierer-Funktion erstellen

Um Ordinalzahlen zu formatieren, kombinieren Sie Intl.PluralRules mit einer Zuordnung von Pluralkategorien zu Suffixen. Erstellen Sie eine Formatiererfunktion, die eine Zahl entgegennimmt und die formatierte Zeichenkette zurückgibt.

function formatOrdinal(number, locale) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);

  const suffixes = {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  };

  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1, 'en-US'));
// Output: "1st"

console.log(formatOrdinal(2, 'en-US'));
// Output: "2nd"

console.log(formatOrdinal(3, 'en-US'));
// Output: "3rd"

console.log(formatOrdinal(4, 'en-US'));
// Output: "4th"

Diese Funktion erstellt bei jeder Ausführung eine neue PluralRules-Instanz. Für bessere Performance erstellen Sie das Regelobjekt einmal und verwenden es für mehrere Zahlen wieder.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1));
// Output: "1st"

console.log(formatOrdinal(21));
// Output: "21st"

console.log(formatOrdinal(22));
// Output: "22nd"

console.log(formatOrdinal(23));
// Output: "23rd"

Die API verarbeitet Zahlen wie 11, 12 und 13 korrekt, die alle „th" verwenden, unabhängig von ihrer Endziffer.

console.log(formatOrdinal(11));
// Output: "11th"

console.log(formatOrdinal(12));
// Output: "12th"

console.log(formatOrdinal(13));
// Output: "13th"

Die Pluralregeln kodieren alle Sonderfälle und Ausnahmen für das Gebietsschema. Sie müssen keine bedingte Logik schreiben, um diese Grenzfälle zu behandeln.

Formatierung von Ordinalzahlen für verschiedene Gebietsschemata

Die Pluralkategorien und ihre Bedeutungen ändern sich je nach Gebietsschema. Einige Sprachen haben weniger Kategorien als Englisch. Andere haben unterschiedliche Regeln dafür, welche Zahlen in welche Kategorie fallen.

Walisisch verwendet ein anderes Kategorisierungssystem. Die Regeln identifizieren mehr Kategorien, die jeweils unterschiedlichen Ordinalformen im Walisischen entsprechen.

const enRules = new Intl.PluralRules('en-US', { type: 'ordinal' });
const cyRules = new Intl.PluralRules('cy', { type: 'ordinal' });

console.log(enRules.select(1));
// Output: "one"

console.log(cyRules.select(1));
// Output: "one"

console.log(enRules.select(2));
// Output: "two"

console.log(cyRules.select(2));
// Output: "two"

console.log(enRules.select(5));
// Output: "other"

console.log(cyRules.select(5));
// Output: "many"

Um mehrere Gebietsschemata zu unterstützen, benötigen Sie unterschiedliche Suffix-Zuordnungen für jedes Gebietsschema. Die Kategorien bleiben gleich, aber die Suffixe ändern sich.

const ordinalSuffixes = {
  'en-US': {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  },
  'fr-FR': {
    one: 'er',
    other: 'e'
  }
};

function formatOrdinal(number, locale) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);
  const suffixes = ordinalSuffixes[locale];
  const suffix = suffixes[category] || suffixes.other;
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1, 'en-US'));
// Output: "1st"

console.log(formatOrdinal(1, 'fr-FR'));
// Output: "1er"

console.log(formatOrdinal(2, 'en-US'));
// Output: "2nd"

console.log(formatOrdinal(2, 'fr-FR'));
// Output: "2e"

Dieser Ansatz funktioniert gut, wenn Sie die Suffix-Strings für jedes Gebietsschema kontrollieren. Er erfordert jedoch die Pflege von Suffix-Daten für jedes von Ihnen unterstützte Gebietsschema.

Verständnis der ordinalen Pluralkategorien

Die Intl.PluralRules-API verwendet sechs mögliche Kategorienamen. Verschiedene Gebietsschemata verwenden unterschiedliche Teilmengen dieser Kategorien.

Die Kategorien sind zero, one, two, few, many und other. Nicht alle Sprachen unterscheiden zwischen allen sechs Kategorien. Englische Ordinalzahlen verwenden nur vier: one, two, few und other.

Die Kategorienamen entsprechen nicht direkt den numerischen Werten. Die Kategorie „one" umfasst 1, 21, 31, 41 und alle Zahlen, die auf 1 enden, außer 11. Die Kategorie „two" umfasst 2, 22, 32, 42 und alle Zahlen, die auf 2 enden, außer 12.

Sie können überprüfen, welche Kategorien ein Gebietsschema verwendet, indem Sie die resolvedOptions()-Methode aufrufen und die pluralCategories-Eigenschaft untersuchen.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });
const options = rules.resolvedOptions();

console.log(options.pluralCategories);
// Output: ["one", "two", "few", "other"]

Dies zeigt, dass englische Ordinalzahlen vier Kategorien verwenden. Andere Sprachen verwenden unterschiedliche Kategoriesätze.

const rules = new Intl.PluralRules('fr-FR', { type: 'ordinal' });
const options = rules.resolvedOptions();

console.log(options.pluralCategories);
// Output: ["one", "other"]

Französische Ordinalzahlen unterscheiden nur zwischen one und other. Diese einfachere Kategorisierung spiegelt die einfacheren Suffixregeln im Französischen wider.

Formatierung von Ordinalzahlen für die Sprache der Benutzer

Anstatt eine bestimmte Sprache fest zu codieren, können Sie die bevorzugte Sprache der Benutzer aus dem Browser verwenden. Die Eigenschaft navigator.language gibt die bevorzugte Sprache der Benutzer zurück.

const userLocale = navigator.language;
const rules = new Intl.PluralRules(userLocale, { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category] || suffixes.other;
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1));
// Output varies by user's locale

Dieser Ansatz passt sich automatisch an die Sprachpräferenz der Benutzer an. Sie müssen jedoch weiterhin geeignete Suffix-Zuordnungen für jede Sprache bereitstellen, die Ihre Anwendung unterstützt.

Für Sprachen ohne spezifische Suffix-Zuordnungen können Sie auf ein Standardverhalten zurückgreifen oder die Zahl ohne Suffix anzeigen.

function formatOrdinal(number, locale = navigator.language) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);

  const localeMapping = ordinalSuffixes[locale];

  if (!localeMapping) {
    return String(number);
  }

  const suffix = localeMapping[category] || localeMapping.other || '';
  return `${number}${suffix}`;
}

Diese Funktion gibt nur die Zahl zurück, wenn keine Suffix-Zuordnung für die Sprache vorhanden ist.

Häufige Anwendungsfälle für Ordinalzahlen

Ordinalzahlen erscheinen in mehreren gängigen Kontexten in Benutzeroberflächen. Das Verständnis dieser Anwendungsfälle hilft Ihnen zu entscheiden, wann Zahlen als Ordinalzahlen formatiert werden sollen.

Ranglisten und Bestenlisten zeigen Benutzerpositionen. Eine Gaming-Anwendung zeigt "1. Platz", "2. Platz", "3. Platz" anstelle von "Platz 1", "Platz 2", "Platz 3".

function formatRanking(position) {
  const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });
  const category = rules.select(position);

  const suffixes = {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  };

  const suffix = suffixes[category];
  return `${position}${suffix} place`;
}

console.log(formatRanking(1));
// Output: "1st place"

console.log(formatRanking(42));
// Output: "42nd place"

Die Datumsformatierung verwendet manchmal Ordinalzahlen für den Tag des Monats. Einige Sprachen schreiben "1. Januar" anstelle von "Januar 1".

Schritt-für-Schritt-Anleitungen verwenden Ordinalzahlen zur Nummerierung jedes Schritts. Ein Tutorial zeigt "1. Schritt: Software installieren", "2. Schritt: Einstellungen konfigurieren", "3. Schritt: Anwendung starten".

Listenelemente in langen Sequenzen profitieren von der Ordinalformatierung, wenn die Betonung der Position wichtiger ist als nur die Aufzählung.

Wiederverwendung von Regelobjekten für bessere Performance

Das Erstellen einer neuen Intl.PluralRules-Instanz umfasst das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Ordinalzahlen mit derselben Locale formatieren, erstellen Sie das Regelobjekt einmal und verwenden Sie es wieder.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

const positions = [1, 2, 3, 4, 5];

positions.forEach(position => {
  console.log(formatOrdinal(position));
});
// Output:
// "1st"
// "2nd"
// "3rd"
// "4th"
// "5th"

Dieser Ansatz ist effizienter als das Erstellen eines neuen Regelobjekts für jede Zahl. Der Performance-Unterschied wird signifikant, wenn Arrays mit Hunderten oder Tausenden von Werten formatiert werden.

Sie können auch eine Formatter-Factory erstellen, die eine für eine bestimmte Locale konfigurierte Funktion zurückgibt.

function createOrdinalFormatter(locale, suffixMapping) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });

  return function(number) {
    const category = rules.select(number);
    const suffix = suffixMapping[category] || suffixMapping.other || '';
    return `${number}${suffix}`;
  };
}

const formatEnglishOrdinal = createOrdinalFormatter('en-US', {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
});

console.log(formatEnglishOrdinal(1));
// Output: "1st"

console.log(formatEnglishOrdinal(2));
// Output: "2nd"

Dieses Pattern kapselt das Regelobjekt und das Suffix-Mapping zusammen und macht den Formatter einfach in Ihrer Anwendung wiederverwendbar.