So steuern Sie, ob Groß- oder Kleinschreibung beim Sortieren zuerst kommt

Verwenden Sie die Option caseFirst in Intl.Collator, um die Groß-/Kleinschreibungsreihenfolge beim Sortieren von Strings zu bestimmen

Einführung

Wenn Sie ein Array von Strings sortieren, die sich nur in ihrer Groß- und Kleinschreibung unterscheiden, muss JavaScript entscheiden, welche Version zuerst kommt. Soll apple vor Apple kommen, oder soll Apple vor apple kommen? Verschiedene Anwendungen haben unterschiedliche Anforderungen an diese Reihenfolge.

Standardmäßig hängt die Sortierreihenfolge für Strings, die sich nur in der Groß- und Kleinschreibung unterscheiden, von den Locale- und Sensitivity-Einstellungen ab. In vielen Fällen werden Strings wie apple und Apple als gleich behandelt, wodurch ihre Reihenfolge unvorhersehbar wird. Wenn die Groß-/Kleinschreibungsreihenfolge für Ihre Anwendung wichtig ist, benötigen Sie explizite Kontrolle darüber, ob Groß- oder Kleinbuchstaben zuerst sortiert werden.

Die Intl.Collator-API bietet eine caseFirst-Option, die die Groß-/Kleinschreibungsreihenfolge bestimmt. Sie können den Collator so konfigurieren, dass Großbuchstaben vor Kleinbuchstaben, Kleinbuchstaben vor Großbuchstaben oder das Standardverhalten der Locale verwendet wird. Diese Lektion erklärt, wie die caseFirst-Option funktioniert, wann sie eine Auswirkung hat und wie Sie sie in praktischen Sortierszenarien verwenden.

Was die Option caseFirst bewirkt

Die caseFirst-Option steuert die Reihenfolge von Strings, die sich nur in ihrer Groß- und Kleinschreibung unterscheiden. Sie akzeptiert drei String-Werte: "upper", "lower" oder "false".

Wenn auf "upper" gesetzt, werden Großbuchstaben vor ihren kleingeschriebenen Entsprechungen sortiert. Der String Apple kommt vor apple.

Wenn auf "lower" gesetzt, werden Kleinbuchstaben vor ihren Großbuchstaben-Äquivalenten sortiert. Die Zeichenkette apple kommt vor Apple.

Wenn auf "false" gesetzt (der String-Wert, nicht der Boolean), verwendet der Collator die Standard-Groß-/Kleinschreibungsreihenfolge des Gebietsschemas. Dies ist das Standardverhalten, wenn Sie die Option nicht angeben.

Die Option caseFirst betrifft nur Zeichenketten, die sich ausschließlich in der Groß-/Kleinschreibung unterscheiden. Zeichenketten, die sich in ihren Basisbuchstaben unterscheiden, werden unabhängig von dieser Einstellung nach normalen alphabetischen Regeln sortiert.

Wie die Standard-Groß-/Kleinschreibungsreihenfolge funktioniert

Ohne Angabe der Option caseFirst verwendet der Collator ein Standardverhalten, das von den Gebietsschema- und Sensitivitätseinstellungen abhängt.

const collator = new Intl.Collator('en-US');
const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'APPLE']

Die Ausgabereihenfolge hängt von der Implementierung und dem Gebietsschema ab. Bei Standard-Sensitivitätseinstellungen berücksichtigt der Collator Groß-/Kleinschreibungsunterschiede, aber die spezifische Reihenfolge von apple, Apple und APPLE variiert.

Verschiedene Gebietsschemas haben unterschiedliche Standard-Konventionen für die Groß-/Kleinschreibungsreihenfolge. Einige Gebietsschemas platzieren traditionell Kleinbuchstaben zuerst, während andere Großbuchstaben zuerst platzieren. Das Verlassen auf Standardverhalten führt zu inkonsistenten Ergebnissen in verschiedenen Umgebungen.

Großbuchstaben mit caseFirst upper zuerst platzieren

Das Setzen von caseFirst: "upper" stellt sicher, dass Großbuchstaben in sortierten Ergebnissen immer vor ihren Kleinbuchstaben-Äquivalenten kommen.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['Apple', 'apple', 'Banana', 'banana']

Der Collator sortiert zuerst alphabetisch nach Basisbuchstaben und wendet dann die Groß-/Kleinschreibungsreihenfolge innerhalb jeder Gruppe an. Unter Wörtern, die mit a beginnen, kommt Apple vor apple. Unter Wörtern, die mit b beginnen, kommt Banana vor banana.

Diese Sortierung ist nützlich bei der Anzeige von Listen, in denen Eigennamen oder großgeschriebene Titel prominent vor Gattungsnamen erscheinen sollen.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const names = ['smith', 'Smith', 'jones', 'Jones'];

names.sort(collator.compare);

console.log(names);
// Output: ['Jones', 'jones', 'Smith', 'smith']

Großgeschriebene Namen erscheinen vor kleingeschriebenen Versionen, was es einfacher macht, Eigennamen von gewöhnlichen Wörtern in gemischten Listen zu unterscheiden.

Kleinbuchstaben zuerst platzieren mit caseFirst lower

Die Einstellung caseFirst: "lower" stellt sicher, dass Kleinbuchstaben in sortierten Ergebnissen immer vor ihren großgeschriebenen Entsprechungen erscheinen.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'banana', 'Banana']

Der Collator sortiert zunächst alphabetisch und platziert dann kleingeschriebene Versionen vor großgeschriebenen Versionen innerhalb jeder alphabetischen Gruppe.

Diese Sortierung entspricht Konventionen, bei denen kleingeschriebener Text als standardmäßiger oder neutraler betrachtet wird, während Großschreibung für Hervorhebungen oder Sonderfälle reserviert ist.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });
const tags = ['javascript', 'JavaScript', 'python', 'Python'];

tags.sort(collator.compare);

console.log(tags);
// Output: ['javascript', 'JavaScript', 'python', 'Python']

Kleingeschriebene Tags erscheinen zuerst, was nützlich ist, wenn Kleinschreibung die kanonische Form darstellt und großgeschriebene Versionen weniger häufige Varianten sind.

Verwendung von caseFirst false für locale-spezifisches Standardverhalten

Die Einstellung caseFirst: "false" (der String-Wert) fordert explizit die Standard-Groß-/Kleinschreibungsreihenfolge der Locale an. Dies erzeugt dasselbe Ergebnis wie das vollständige Weglassen der Option.

const collator = new Intl.Collator('en-US', { caseFirst: 'false' });
const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output depends on locale implementation

Die Ausgabereihenfolge hängt davon ab, was die Locale als Standard betrachtet. Einige Locales definieren Großbuchstaben zuerst, andere definieren Kleinbuchstaben zuerst, und einige behandeln Strings mit unterschiedlicher Groß-/Kleinschreibung als gleich.

Diese Option ist nützlich, wenn Sie explizit machen möchten, dass Sie Locale-Standards verwenden, anstatt versehentlich eine Konfigurationswahl wegzulassen.

Wann caseFirst keine Auswirkung hat

Die Option caseFirst beeinflusst den Vergleich nur, wenn die Sensitivity-Einstellung zulässt, dass Groß-/Kleinschreibungsunterschiede relevant sind. Bei sensitivity: "base" oder sensitivity: "accent" werden Groß-/Kleinschreibungsunterschiede vollständig ignoriert, wodurch die Option caseFirst irrelevant wird.

const collator = new Intl.Collator('en-US', {
  sensitivity: 'base',
  caseFirst: 'upper'
});

const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'APPLE'] (or any order)

Bei Basis-Sensitivität behandelt der Collator alle drei Strings als gleich. Die Option caseFirst hat keine Auswirkung, da die Groß-/Kleinschreibung überhaupt nicht berücksichtigt wird. Der Sortieralgorithmus bewahrt die ursprüngliche Reihenfolge gleicher Elemente (stabile Sortierung), sodass die Ausgabe der Eingabereihenfolge entspricht.

Damit caseFirst eine Auswirkung hat, verwenden Sie sensitivity: "case" oder sensitivity: "variant" (die Standardeinstellung).

const collator = new Intl.Collator('en-US', {
  sensitivity: 'variant',
  caseFirst: 'upper'
});

const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['APPLE', 'Apple', 'apple']

Bei Varianten-Sensitivität (die alle Unterschiede einschließlich Groß-/Kleinschreibung berücksichtigt) bestimmt die Option caseFirst die Reihenfolge dieser Strings mit unterschiedlicher Groß-/Kleinschreibung.

Sortieren von Namen mit konsistenter Groß-/Kleinschreibungsreihenfolge

Beim Sortieren von Benutzernamen oder anderen Eigennamen sorgt eine konsistente Groß-/Kleinschreibungsreihenfolge für vorhersehbare Ergebnisse in Ihrer Anwendung.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });

const users = [
  { name: 'alice' },
  { name: 'Alice' },
  { name: 'bob' },
  { name: 'Bob' }
];

users.sort((a, b) => collator.compare(a.name, b.name));

users.forEach(user => {
  console.log(user.name);
});
// Output:
// Alice
// alice
// Bob
// bob

Der Collator platziert großgeschriebene Namen vor kleingeschriebenen Versionen. Diese Reihenfolge erleichtert es, Eigennamen von gewöhnlichen Wörtern in gemischten Datensätzen zu unterscheiden.

Sortieren von Dateinamen mit kontrollierter Groß-/Kleinschreibungsreihenfolge

Dateisysteme haben unterschiedliche Verhaltensweisen bezüglich der Groß-/Kleinschreibung. Einige behandeln Groß- und Kleinbuchstaben als identisch, andere als unterschiedlich. Eine explizite Groß-/Kleinschreibungsreihenfolge stellt sicher, dass Ihre sortierten Dateilisten den Erwartungen der Benutzer entsprechen, unabhängig vom zugrunde liegenden Dateisystem.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });

const files = ['README.md', 'readme.md', 'index.js', 'Index.js'];

files.sort(collator.compare);

console.log(files);
// Output: ['index.js', 'Index.js', 'readme.md', 'README.md']

Kleingeschriebene Versionen erscheinen zuerst, entsprechend der Konvention, dass kleingeschriebene Dateinamen auf Unix-ähnlichen Systemen standardmäßiger sind.

Kombination von caseFirst mit numerischer Kollation

Die Option caseFirst funktioniert zusammen mit anderen Kollationsoptionen wie numeric. Sie können Strings mit eingebetteten Zahlen sortieren und gleichzeitig die Groß-/Kleinschreibungsreihenfolge steuern.

const collator = new Intl.Collator('en-US', {
  numeric: true,
  caseFirst: 'upper'
});

const items = ['item1', 'Item1', 'item2', 'Item2', 'item10', 'Item10'];

items.sort(collator.compare);

console.log(items);
// Output: ['Item1', 'item1', 'Item2', 'item2', 'Item10', 'item10']

Der Collator wendet numerischen Vergleich für die Zahlenteile und Groß-/Kleinschreibungsreihenfolge für die Buchstabenteile an. Elemente werden zuerst nach numerischem Wert sortiert (1, 2, 10), dann nach Groß-/Kleinschreibung innerhalb jeder numerischen Gruppe.

Verwendung des Unicode-Erweiterungsschlüssels für caseFirst

Die Option caseFirst kann auch über eine Unicode-Erweiterung in der Locale-Kennung mit dem Schlüssel kf gesetzt werden. Die Erweiterungswerte sind upper, lower und false.

const collator = new Intl.Collator('en-US-u-kf-upper');
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['Apple', 'apple', 'Banana', 'banana']

Die Locale-Zeichenkette en-US-u-kf-upper spezifiziert US-Englisch mit Großbuchstaben-zuerst-Sortierung. Dies erzeugt dasselbe Ergebnis wie die Übergabe von { caseFirst: 'upper' } im Options-Objekt.

Wenn sowohl die Unicode-Erweiterung als auch das Options-Objekt caseFirst spezifizieren, hat das Options-Objekt Vorrang.

const collator = new Intl.Collator('en-US-u-kf-upper', {
  caseFirst: 'lower'
});

const words = ['apple', 'Apple'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple']

Das Options-Objekt spezifiziert caseFirst: 'lower', was die Erweiterung kf-upper in der Locale-Zeichenkette überschreibt. Der Collator verwendet Kleinbuchstaben-zuerst-Sortierung.

Überprüfung, welchen caseFirst-Wert ein Collator verwendet

Die Methode resolvedOptions() gibt die tatsächlichen Optionen zurück, die der Collator verwendet, einschließlich der Einstellung caseFirst.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const options = collator.resolvedOptions();

console.log(options.caseFirst);
// Output: "upper"

Dies ist nützlich für Debugging oder zur Überprüfung, dass Ihr Collator die erwartete Konfiguration hat, insbesondere beim Kombinieren von Unicode-Erweiterungen mit Options-Objekten.

const collator = new Intl.Collator('en-US-u-kf-lower');
const options = collator.resolvedOptions();

console.log(options.caseFirst);
// Output: "lower"

Die aufgelösten Optionen spiegeln die Unicode-Erweiterungseinstellung wider, wenn kein Options-Objekt sie überschreibt.

Wann welcher caseFirst-Wert zu verwenden ist

Verwenden Sie caseFirst: "upper", wenn:

  • Sie möchten, dass Eigennamen oder Titel vor gewöhnlichen Wörtern erscheinen
  • Ihre Anwendungskonvention großgeschriebenen Text als bedeutsamer behandelt
  • Sie Namen sortieren, bei denen großgeschriebene Versionen kanonisch sind

Verwenden Sie caseFirst: "lower", wenn:

  • Sie möchten, dass kleingeschriebener Text zuerst als Standardform erscheint
  • Ihre Anwendungskonvention Kleinbuchstaben als Standard und Großbuchstaben als Sonderfall behandelt
  • Sie technische Bezeichner sortieren, bei denen Kleinbuchstaben häufiger vorkommen

Verwenden Sie caseFirst: "false", wenn:

  • Sie gebietsschemaspezifische Konventionen befolgen möchten
  • Die Reihenfolge von Zeichenfolgen mit unterschiedlicher Groß-/Kleinschreibung für Ihre Anwendung keine Rolle spielt
  • Sie explizit deutlich machen möchten, dass Sie Standardwerte verwenden, anstatt die Option versehentlich wegzulassen