Wie man Prozentsätze mit Prozentzeichen formatiert

Einführung

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

Die Intl.NumberFormat-API von JavaScript behandelt diese Formatierungsunterschiede automatisch. Durch Setzen der Option style auf "percent" erhält man korrekt formatierte Prozentsätze für jede Locale, ohne locale-spezifischen Code schreiben zu müssen.

Warum die Prozentformatierung je nach Locale variiert

Die Position des Prozentzeichens und die Regeln für Leerzeichen unterscheiden sich je nach Locale. Im Englischen steht das Prozentzeichen direkt nach der Zahl ohne Leerzeichen. Französisch fügt vor dem Prozentzeichen ein Leerzeichen ein. 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. Der Dezimaltrenner und der Tausendertrenner 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 einzigen Locale zu sehen. Ein französischer Benutzer, der 50% statt 50 % sieht, erlebt ein unnatürliches Format. Ein türkischer Benutzer, der 50% sieht, wenn er %50 erwartet, steht vor dem gleichen 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));
// Ausgabe: "75%"

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

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

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

Diese Konvention für Brucheingaben entspricht der Funktionsweise von Prozentsätzen in der Mathematik und in den meisten Programmierberechnungen. Wenn Sie einen Prozentsatz wie Wachstumsrate oder Fertigstellungsverhältnis 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.

Verständnis von Brucheingabewerten

Der Prozentformatierer erwartet Brucheingaben, wobei 1,0 100% darstellt. Diese Designentscheidung entspricht der Berechnung von Prozentsätzen im Code.

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

// Berechnung des Fertigstellungsprozentsatzes
const completed = 75;
const total = 100;
const ratio = completed / total;

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

// Berechnung der Wachstumsrate
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;

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

Wenn Sie completed durch total teilen, erhalten Sie 0,75. Übergeben Sie dies direkt an den Formatierer, und es wird als 75% angezeigt. Wenn Sie das Wachstum als Verhältnis von Ä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% statt 75% führt. Der Formatierer übernimmt die Multiplikation, sodass Sie in Ihrem Code mit der natürlichen Dezimaldarstellung arbeiten.

Umgang mit Werten außerhalb des 0-1 Bereichs

Prozentsätze sind nicht auf Werte zwischen 0% und 100% beschränkt. Werte unter null stellen negative Prozentsätze dar. Werte über 1.0 repräsentieren Prozentsätze größer als 100%.

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 Darstellung 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 Wachstum im Jahresvergleich oder Vergleichen, bei denen der neue Wert den Ausgangswert übersteigt.

Sehr kleine Werte werden aufgrund der Standardpräzisionseinstellungen möglicherweise auf 0% gerundet. Der Wert 0.0025, der 0,25% darstellt, wird als 0% angezeigt, da die standardmäßige maximale Anzahl von Nachkommastellen für Prozentsätze 0 ist. Die nächste Lektion behandelt die Steuerung der Dezimalstellen, um diese kleineren Prozentsätze genau anzuzeigen.

Formatierung von Prozentsätzen in verschiedenen Sprachen

Die Prozentformatierung passt sich der von Ihnen angegebenen Sprache an. Jede Sprache wendet ihre eigenen Regeln für Zeichenplatzierung, 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"

Im Englischen steht das Prozentzeichen direkt nach der Zahl. Französisch fügt vor dem Prozentzeichen ein Leerzeichen ein. Türkisch platziert das Prozentzeichen vor der Zahl. Arabisch verwendet das arabische Prozentzeichen und folgt der Textrichtung von rechts nach links.

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

Steuerung der Dezimalstellen bei Prozentangaben

Standardmäßig zeigt die Prozentformatierung keine Dezimalstellen an. Ein Wert wie 0,755 wird nach Rundung als 76% formatiert. Sie können die Anzahl der Dezimalstellen mit den 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 Formatierer mindestens so viele Dezimalstellen anzeigt und bei Bedarf Nullen anhängt. Die Option maximumFractionDigits begrenzt die Anzahl der Dezimalstellen und rundet den Wert gegebenenfalls.

Wenn beide auf denselben Wert gesetzt werden, wird eine einheitliche Formatierung für alle Prozentangaben gewährleistet. Dies ist nützlich in Tabellen und Diagrammen, in denen alle Prozentangaben visuell ausgerichtet sein sollen.

Die nächste Lektion behandelt die Steuerung von Dezimalstellen ausführlicher, einschließlich des Umgangs mit nachgestellten Nullen und der genauen Anzeige sehr kleiner Prozentsätze.

Kombination von Prozentangaben mit Vorzeichenanzeige

Die Prozentformatierung funktioniert mit der Option signDisplay, um Pluszeichen für positive Prozentsätze explizit anzuzeigen. Dies ist nützlich bei der Anzeige 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 Option signDisplay wurde in einer früheren Lektion behandelt. In Kombination mit der Prozentformatierung verdeutlicht sie, ob ein Prozentsatz eine Zunahme oder Abnahme darstellt. Ohne das explizite Pluszeichen könnten positive Prozentsätze in Kontexten, in denen sowohl Gewinne als auch Verluste angezeigt werden, mehrdeutig sein.

Formatierung von Null als Prozentsatz

Null wird standardmäßig als 0% formatiert. Wie Sie mit Null umgehen, 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 Prozentsätze an, lässt aber das Vorzeichen für Null weg. Dies macht Null visuell unterscheidbar, wenn es einen neutralen Zustand wie keine Änderung darstellt.

Wann Prozentformatierung verwendet werden sollte

Verwenden Sie die Prozentformatierung, wenn Sie Verhältnisse, Raten oder Proportionen anzeigen, die natürlicherweise als Prozentsätze ausgedrückt werden. Typische Anwendungsfälle sind Fortschrittsanzeigen, Zinssätze, Rabattbeträge, Wachstumsraten, Erfolgsquoten 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-Verkettung. Dies geht jedoch auf Kosten 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, dividieren Sie vor der Formatierung durch 100 oder verwenden Sie eine einfache Zahlenformatierung mit einem manuell angehängten Prozentzeichen.

Verständnis der Prozentformatierer-Präzision

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äzisionskontrolle im Detail.