Prozentangaben mit Prozentzeichen formatieren

Einführung

Prozentangaben erscheinen in vielen Anwendungen, von der Anzeige des Fortschritts bis hin zur Darstellung von Zinssätzen und Rabattbeträgen. Ein einfacher Ansatz wie die Verkettung einer Zahl mit einem Prozentzeichen funktioniert für grundlegende Fälle, berücksichtigt jedoch nicht, wie verschiedene Sprachen und Regionen Prozentangaben formatieren. Im Türkischen erscheint das Prozentzeichen vor der Zahl als %50. Im Französischen trennt ein Leerzeichen die Zahl vom Prozentzeichen als 50 %. Arabisch verwendet ein spezielles Prozentzeichen anstelle des Standard-%-Symbols.

Die Intl.NumberFormat-API von JavaScript behandelt diese Formatierungsunterschiede automatisch. Durch Setzen der style-Option auf "percent" erhalten Sie korrekt formatierte Prozentangaben für jede Locale, ohne lokalisierungsspezifischen Code zu schreiben.

Warum die Prozentformatierung je nach Locale variiert

Die Position des Prozentzeichens und die Abstandsregeln unterscheiden sich je nach Locale. Englisch platziert das Prozentzeichen direkt nach der Zahl ohne Leerzeichen. Französisch fügt ein Leerzeichen vor dem Prozentzeichen hinzu. Türkisch platziert das Prozentzeichen vor der Zahl. Diese Variationen spiegeln die natürlichen Lesemuster und Konventionen jeder Sprache wider.

Die Formatierungsunterschiede gehen über die bloße Zeichenplatzierung hinaus. Einige Locales verwenden unterschiedliche Zeichen für das Prozentsymbol. Arabisch verwendet ٪ (U+066A) anstelle des ASCII-Prozentzeichens. Das Dezimaltrennzeichen und das Tausendertrennzeichen variieren ebenfalls je nach Locale, genau wie bei der regulären Zahlenformatierung.

Wenn Sie die Prozentformatierung mit String-Verkettung fest codieren, zwingen Sie alle Benutzer, das Format einer einzelnen Locale zu sehen. Ein französischer Benutzer, der 50% anstelle von 50 % sieht, erlebt ein unnatürliches Format. Ein türkischer Benutzer, der 50% sieht, wenn er %50 erwartet, steht vor demselben Problem. Die Intl-API löst dies, indem sie die korrekten Formatierungsregeln für jede Locale anwendet.

Zahlen als Prozentsätze formatieren

Die Option style in Intl.NumberFormat steuert, ob eine Zahl als einfache Zahl, Währung, Prozentsatz oder Einheit formatiert wird. Setzen Sie style auf "percent", um Zahlen als Prozentsätze zu formatieren.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0.75));
// Output: "75%"

console.log(formatter.format(0.05));
// Output: "5%"

console.log(formatter.format(1.5));
// Output: "150%"

Der Formatierer multipliziert den Eingabewert automatisch mit 100 und fügt das Prozentzeichen hinzu. Das bedeutet, dass Sie Dezimalwerte an den Formatierer übergeben. Ein Wert von 0,75 wird zu 75 %. Ein Wert von 1,5 wird zu 150 %.

Diese Konvention für Dezimaleingaben entspricht der mathematischen Funktionsweise von Prozentsätzen und den meisten Berechnungen in der Programmierung. Wenn Sie einen Prozentsatz wie Wachstumsrate oder Fertigstellungsgrad berechnen, ist das Ergebnis typischerweise ein Dezimalwert zwischen 0 und 1. Sie können diesen Wert direkt an den Formatierer übergeben, ohne ihn vorher in einen Prozentsatz umzuwandeln.

Dezimaleingabewerte verstehen

Der Prozentformatierer erwartet Dezimaleingaben, bei denen 1,0 für 100 % steht. Diese Designentscheidung entspricht der Berechnung von Prozentsätzen im Code.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

// Calculating completion percentage
const completed = 75;
const total = 100;
const ratio = completed / total;

console.log(formatter.format(ratio));
// Output: "75%"

// Calculating growth rate
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;

console.log(formatter.format(growth));
// Output: "25%"

Wenn Sie completed durch total teilen, erhalten Sie 0,75. Übergeben Sie diesen Wert direkt an den Formatierer, und er wird als 75 % angezeigt. Wenn Sie das Wachstum als Verhältnis der Änderung zum ursprünglichen Wert berechnen, erhalten Sie 0,25. Der Formatierer zeigt dies als 25 % an.

Dieser Ansatz verhindert einen häufigen Fehler, bei dem Entwickler vor der Formatierung mit 100 multiplizieren, was zu Werten wie 7500 % anstelle von 75 % führt. Der Formatierer übernimmt die Multiplikation, sodass Sie in Ihrem Code mit der natürlichen Dezimaldarstellung arbeiten.

Werte außerhalb des Bereichs 0–1 verarbeiten

Prozentsätze sind nicht auf Werte zwischen 0 % und 100 % beschränkt. Werte unter null stellen negative Prozentsätze dar. Werte über 1,0 stellen Prozentsätze über 100 % dar.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(-0.15));
// Output: "-15%"

console.log(formatter.format(2.5));
// Output: "250%"

console.log(formatter.format(0.0025));
// Output: "0%"

Negative Werte werden mit einem Minuszeichen formatiert. Dies ist nützlich für die Anzeige von Rückgängen, Verlusten oder negativen Wachstumsraten. Werte größer als 1,0 werden als Prozentsätze über 100 % formatiert, was üblich ist für die Darstellung von Jahresvergleichen oder Vergleichen, bei denen der neue Wert den Ausgangswert übersteigt.

Sehr kleine Werte können aufgrund der Standard-Präzisionseinstellungen auf 0 % gerundet werden. Der Wert 0,0025, der 0,25 % entspricht, wird als 0 % angezeigt, da die standardmäßige maximale Anzahl von Nachkommastellen für Prozentsätze 0 beträgt. Die nächste Lektion behandelt die Steuerung von Dezimalstellen, um diese kleineren Prozentsätze präzise anzuzeigen.

Formatierung von Prozentsätzen in verschiedenen Locales

Die Prozentformatierung passt sich an das von Ihnen angegebene Locale an. Jedes Locale wendet seine eigenen Regeln für Vorzeichenplatzierung, Abstände und Symbole an.

const enFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(enFormatter.format(0.5));
// Output: "50%"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  style: "percent"
});

console.log(frFormatter.format(0.5));
// Output: "50 %"

const trFormatter = new Intl.NumberFormat("tr-TR", {
  style: "percent"
});

console.log(trFormatter.format(0.5));
// Output: "%50"

const arFormatter = new Intl.NumberFormat("ar-SA", {
  style: "percent"
});

console.log(arFormatter.format(0.5));
// Output: "٪50"

Englisch platziert das Prozentzeichen unmittelbar nach der Zahl. Französisch fügt ein Leerzeichen vor dem Prozentzeichen hinzu. Türkisch platziert das Prozentzeichen vor der Zahl. Arabisch verwendet das arabische Prozentzeichen und folgt der Rechts-nach-Links-Textrichtung.

Diese Unterschiede erfolgen automatisch basierend auf dem Locale-Parameter. Sie müssen keine bedingte Logik schreiben, um verschiedene Locales zu handhaben. Erstellen Sie einen Formatter mit dem Locale des Benutzers, und er erzeugt die korrekte Ausgabe für dieses Locale.

Steuerung von Dezimalstellen bei Prozentsätzen

Standardmäßig zeigt die Prozentformatierung keine Dezimalstellen an. Ein Wert wie 0,755 wird nach dem Runden als 76 % formatiert. Sie können die Anzahl der Dezimalstellen mithilfe der Optionen minimumFractionDigits und maximumFractionDigits steuern.

const defaultFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(defaultFormatter.format(0.755));
// Output: "76%"

const oneDecimalFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(oneDecimalFormatter.format(0.755));
// Output: "75.5%"

const twoDecimalFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(twoDecimalFormatter.format(0.755));
// Output: "75.50%"

Die Option minimumFractionDigits stellt sicher, dass der Formatter mindestens diese Anzahl von Dezimalstellen anzeigt und bei Bedarf nachfolgende Nullen hinzufügt. Die Option maximumFractionDigits begrenzt die Anzahl der Dezimalstellen und rundet den Wert bei Bedarf.

Wenn beide auf denselben Wert gesetzt werden, wird eine konsistente Formatierung über alle Prozentangaben hinweg sichergestellt. Dies ist nützlich in Tabellen und Diagrammen, in denen alle Prozentangaben visuell ausgerichtet werden sollen.

Die nächste Lektion behandelt die Steuerung von Dezimalstellen ausführlicher, einschließlich der Handhabung von nachgestellten Nullen und der präzisen Anzeige sehr kleiner Prozentangaben.

Kombination von Prozentangaben mit Vorzeichenanzeige

Die Prozentformatierung funktioniert mit der signDisplay-Option, um Pluszeichen für positive Prozentangaben explizit anzuzeigen. Dies ist nützlich bei der Darstellung von Änderungen oder Wachstumsraten, bei denen das Vorzeichen die Richtung angibt.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(-0.0341));
// Output: "-3.4%"

console.log(formatter.format(0));
// Output: "+0.0%"

Die signDisplay-Option wurde in einer vorherigen Lektion behandelt. In Kombination mit der Prozentformatierung verdeutlicht sie, ob eine Prozentangabe eine Zunahme oder Abnahme darstellt. Ohne das explizite Pluszeichen könnten positive Prozentangaben in Kontexten, in denen sowohl Gewinne als auch Verluste angezeigt werden, mehrdeutig sein.

Formatierung von Null als Prozentangabe

Null wird standardmäßig als 0 % formatiert. Die Handhabung von Null hängt davon ab, ob Null keine Änderung, keinen Wert oder eine aussagekräftige Messung darstellt.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0));
// Output: "0%"

const withSignFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero"
});

console.log(withSignFormatter.format(0.05));
// Output: "+5%"

console.log(withSignFormatter.format(0));
// Output: "0%"

Die Verwendung von signDisplay: "exceptZero" zeigt Vorzeichen für positive und negative Prozentangaben an, lässt das Vorzeichen bei Null jedoch weg. Dies macht Null visuell unterscheidbar, wenn sie einen neutralen Zustand wie keine Änderung darstellt.

Wann Prozentformatierung verwendet werden sollte

Verwenden Sie die Prozentformatierung bei der Anzeige von Verhältnissen, Raten oder Proportionen, die natürlicherweise als Prozentangaben ausgedrückt werden. Häufige Anwendungsfälle umfassen Fertigstellungsfortschritt, Zinssätze, Rabattbeträge, Wachstumsraten, Erfolgsraten und Wahrscheinlichkeitswerte.

Verwenden Sie keine Prozentformatierung, wenn das Prozentzeichen unabhängig vom Gebietsschema an einer bestimmten Position erscheinen muss. Wenn Ihr Design erfordert, dass das Prozentzeichen aus Gründen der visuellen Konsistenz immer rechts erscheint, verwenden Sie stattdessen String-Konkatenation. Dies geht jedoch zu Lasten der Internationalisierungskorrektheit.

Vermeiden Sie auch die Prozentformatierung, wenn Sie mit Werten arbeiten, die bereits mit 100 multipliziert wurden. Wenn Ihre Daten Prozentsätze als ganze Zahlen speichern, wobei 75 für 75% steht, teilen Sie vor der Formatierung durch 100 oder verwenden Sie eine einfache Zahlenformatierung mit einem manuell angehängten Prozentzeichen.

Präzision des Prozentformatierers verstehen

Die Standardpräzision für die Prozentformatierung beträgt 0 Dezimalstellen. Dies unterscheidet sich von der einfachen Zahlenformatierung, die die Präzision basierend auf dem Eingabewert anpasst. Der Prozentformatierer rundet Werte auf ganze Prozentsätze, es sei denn, Sie legen explizit Optionen für Nachkommastellen fest.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0.755));
// Output: "76%"

console.log(formatter.format(0.754));
// Output: "75%"

console.log(formatter.format(0.001));
// Output: "0%"

Werte werden auf den nächsten ganzen Prozentsatz gerundet. Der Wert 0,755 wird auf 76% gerundet. Der Wert 0,754 wird auf 75% gerundet. Sehr kleine Werte wie 0,001 werden auf 0% gerundet.

Wenn Sie kleine Prozentsätze oder Bruchprozentsätze anzeigen müssen, erhöhen Sie die maximale Anzahl der Nachkommastellen. Die nächste Lektion behandelt die Präzisionssteuerung im Detail.