Wie man Sekundenbruchteile in der Daueranzeige einbezieht

Subsekundenpräzision in formatierten Zeitspannen anzeigen

Einführung

Wenn Sie Zeitdauern mit Subsekundenpräzision anzeigen, müssen Sie Sekundenbruchteile darstellen. Eine Stoppuhr zeigt 1,234 Sekunden an, ein Performance-Profiler zeigt eine Ladezeit von 0,853 Sekunden an, ein Renntimer zeigt eine Zielzeit von 45,678 Sekunden an. Ohne ordnungsgemäße Formatierung könnten Sie Code wie diesen schreiben:

const seconds = 1.234;
const duration = `${seconds}s`;

Dies erzeugt "1.234s" mit einem fest codierten Dezimaltrennzeichen. Französische Benutzer sehen "1.234s", wenn sie "1,234 s" mit einem Komma als Dezimaltrennzeichen erwarten. Verschiedene Gebietsschemas verwenden unterschiedliche Dezimaltrennzeichen und Abstandskonventionen.

JavaScript bietet die Option fractionalDigits in Intl.DurationFormat, um zu steuern, wie Sekundenbruchteile in formatierten Zeitdauern erscheinen. Diese Lektion erklärt, wie man Sekundenbruchteile zu Daueranzeigen hinzufügt und ihre Präzision steuert.

Was Sekundenbruchteile sind

Sekundenbruchteile repräsentieren Zeitintervalle, die kleiner als eine Sekunde sind. Der Wert 1,5 Sekunden bedeutet eineinhalb Sekunden. Der Wert 0,250 Sekunden bedeutet eine Viertelsekunde.

Sekundenbruchteile erscheinen in drei Formen:

  • Millisekunden: Tausendstel einer Sekunde (0,001 Sekunden)
  • Mikrosekunden: Millionstel einer Sekunde (0,000001 Sekunden)
  • Nanosekunden: Milliardstel einer Sekunde (0,000000001 Sekunden)

Die Option fractionalDigits steuert, wie viele Dezimalstellen nach dem Sekundenwert erscheinen. Die Einstellung fractionalDigits: 3 zeigt Millisekunden-Präzision. Die Einstellung fractionalDigits: 6 zeigt Mikrosekunden-Präzision.

Formatieren von Zeitdauern ohne Sekundenbruchteile

Standardmäßig zeigt die Dauerformatierung ganze Sekunden ohne Bruchteile an.

const duration = { hours: 0, minutes: 0, seconds: 1 };

new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second"

new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "0:00:01"

Selbst wenn Sie Millisekunden als separate Einheit einbeziehen, werden sie als eigenständige Einheit und nicht als Sekundenbruchteile angezeigt.

const duration = { seconds: 1, milliseconds: 234 };

new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"

Dies zeigt zwei separate Einheiten an. Um stattdessen "1,234 Sekunden" anzuzeigen, benötigen Sie die Option fractionalDigits.

Bruchteile von Sekunden zu Zeitdauern hinzufügen

Die Option fractionalDigits steuert, wie viele Dezimalstellen im Sekundenwert angezeigt werden. Setzen Sie diese Option, um Sekundenbruchteile in der Ausgabe einzuschließen.

const duration = { seconds: 1.234 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

Die API kombiniert die ganzen und gebrochenen Teile zu einem einzigen formatierten Wert mit dem entsprechenden Dezimaltrennzeichen für die Locale.

Präzision der Sekundenbruchteile steuern

Die Option fractionalDigits akzeptiert Werte von 0 bis 9. Dies bestimmt, wie viele Stellen nach dem Dezimalpunkt erscheinen.

const duration = { seconds: 1.23456789 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 0
}).format(duration);
// "1 second"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 2
}).format(duration);
// "1.23 seconds"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 4
}).format(duration);
// "1.2346 seconds"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 6
}).format(duration);
// "1.234568 seconds"

Wenn die angegebene Präzision die verfügbaren Stellen überschreitet, füllt der Formatierer mit Nullen auf.

const duration = { seconds: 1.5 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"

Wenn eine Rundung erforderlich ist, rundet der Formatierer in Richtung Null.

const duration = { seconds: 1.9999 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 2
}).format(duration);
// "1.99 seconds"

Sekundenbruchteile im digitalen Format verwenden

Das digitale Format zeigt Zeitdauern mit Doppelpunkten wie ein Timer an. Sekundenbruchteile erscheinen nach dem Sekundenwert.

const duration = { hours: 2, minutes: 30, seconds: 12.345 };

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "2:30:12.345"

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "2:30:12.34"

Dies funktioniert für jede Kombination von Zeiteinheiten im digitalen Format.

const duration = { minutes: 5, seconds: 30.678 };

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "5:30.678"

Formatierung von Sekundenbruchteilen in verschiedenen Sprachen

Verschiedene Sprachen verwenden unterschiedliche Dezimaltrennzeichen. Englisch verwendet einen Punkt, viele europäische Sprachen verwenden ein Komma.

const duration = { seconds: 1.234 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

new Intl.DurationFormat('fr', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1,234 seconde"

new Intl.DurationFormat('de', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1,234 Sekunden"

new Intl.DurationFormat('ar', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "١٫٢٣٤ ثانية"

Die API verwendet für jede Sprache das korrekte Dezimaltrennzeichen, Ziffernzeichen und Abstände.

Formatierung von Stoppuhr-Zeiten

Stoppuhr-Anwendungen müssen die verstrichene Zeit mit Subsekunden-Präzision anzeigen. Verwenden Sie das digitale Format mit Sekundenbruchteilen.

function formatStopwatchTime(totalSeconds) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  const duration = { minutes, seconds };
  const locale = navigator.language;

  return new Intl.DurationFormat(locale, {
    style: 'digital',
    fractionalDigits: 2
  }).format(duration);
}

formatStopwatchTime(65.47);
// "1:05.47"

formatStopwatchTime(123.89);
// "2:03.89"

Dies zeigt Zeiten wie "1:05.47" mit zwei Dezimalstellen für Hundertstelsekunden-Präzision an.

Formatierung von Rennzeiten

Sportzeitmesssysteme zeigen Zielzeiten mit hoher Präzision an. Verwenden Sie Millisekunden-Präzision für Rennergebnisse.

function formatRaceTime(totalSeconds, locale) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  const duration = { minutes, seconds };

  return new Intl.DurationFormat(locale, {
    style: 'digital',
    fractionalDigits: 3
  }).format(duration);
}

formatRaceTime(125.678, 'en');
// "2:05.678"

formatRaceTime(125.678, 'fr');
// "2:05,678"

Die drei Dezimalstellen zeigen Millisekunden-Präzision für eine genaue Zeitmessung bei Rennen.

Formatierung von Leistungskennzahlen

Performance-Profiler zeigen Ladezeiten und Ausführungszeiten mit Subsekunden-Präzision an. Verwenden Sie das Kurzformat mit Sekundenbruchteilen.

function formatLoadTime(seconds, locale) {
  const duration = { seconds };

  return new Intl.DurationFormat(locale, {
    style: 'short',
    fractionalDigits: 3
  }).format(duration);
}

formatLoadTime(0.853, 'en');
// "0.853 sec"

formatLoadTime(2.145, 'en');
// "2.145 sec"

Dies zeigt Leistungskennzahlen in einem kompakten Format mit Millisekunden-Präzision an.

Formatierung von Video-Frame-Zeitstempeln

Videobearbeitungsanwendungen zeigen frame-genaue Zeitstempel an. Verwenden Sie Sekundenbruchteile basierend auf der Bildrate.

function formatVideoTimestamp(totalSeconds, locale) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  const duration = hours > 0
    ? { hours, minutes, seconds }
    : { minutes, seconds };

  return new Intl.DurationFormat(locale, {
    style: 'digital',
    fractionalDigits: 2
  }).format(duration);
}

formatVideoTimestamp(125.67, 'en');
// "2:05.67"

formatVideoTimestamp(3665.42, 'en');
// "1:01:05.42"

Dies zeigt Zeitstempel mit Frame-Präzision für 100fps-Video an.

Umwandlung von Millisekunden in Sekundenbruchteile

Zeitberechnungen ergeben oft Millisekunden. Wandeln Sie Millisekunden in Sekundenbruchteile um, indem Sie durch 1000 teilen.

const milliseconds = 1234;
const totalSeconds = milliseconds / 1000;

const duration = { seconds: totalSeconds };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

Dies konvertiert ganze Millisekunden in einen Sekundenbruchteilwert.

Umgang mit sehr kurzen Zeitdauern

Für Zeitdauern unter einer Sekunde sollten Sie nur die Sekundeneinheit mit Nachkommastellen angeben.

const duration = { seconds: 0.045 };

new Intl.DurationFormat('en', {
  style: 'short',
  fractionalDigits: 3
}).format(duration);
// "0.045 sec"

Die Null vor dem Dezimalpunkt zeigt eine Zeitdauer unter einer Sekunde an.

Wählen Sie die Präzision für Ihren Anwendungsfall

Verschiedene Anwendungen erfordern unterschiedliche Präzisionsstufen:

  • Stoppuhren: 2 Dezimalstellen (Hundertstelsekunden)
  • Sportzeitnahme: 3 Dezimalstellen (Millisekunden)
  • Performance-Profiling: 3 Dezimalstellen (Millisekunden)
  • Wissenschaftliche Messungen: 6-9 Dezimalstellen (Mikrosekunden bis Nanosekunden)

Passen Sie den Wert fractionalDigits an Ihre Präzisionsanforderungen an.

const duration = { seconds: 1.23456789 };
const locale = navigator.language;

// Für allgemeine Zeitmessung
new Intl.DurationFormat(locale, {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "0:00:01.23"

// Für präzise Messungen
new Intl.DurationFormat(locale, {
  style: 'short',
  fractionalDigits: 6
}).format(duration);
// "1.234568 sec"

Vermeiden Sie, mehr Präzision anzuzeigen, als Ihr Messsystem liefert.

Bruchteile von Sekunden weglassen, wenn nicht benötigt

Setzen Sie fractionalDigits: 0, um ganze Sekunden ohne Bruchteile anzuzeigen.

const duration = { seconds: 1.7 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 0
}).format(duration);
// "1 second"

Dies rundet den Wert und zeigt nur den ganzzahligen Teil an.

Formatter mit Sekundenbruchteilen wiederverwenden

Die Erstellung von Formatierern mit spezifischen Präzisionseinstellungen folgt denselben Leistungsoptimierungen wie andere Formatierer.

const formatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
});

const times = [
  { minutes: 1, seconds: 5.234 },
  { minutes: 2, seconds: 15.678 },
  { minutes: 0, seconds: 45.901 }
];

times.map(t => formatter.format(t));
// ["1:05.234", "2:15.678", "0:45.901"]

Dies verwendet die Formatierer-Instanz wieder, um eine bessere Leistung bei der Formatierung mehrerer Zeitdauern zu erzielen.

Browser-Unterstützung

Die Option fractionalDigits ist Teil der Intl.DurationFormat-API, die im März 2025 zum Baseline-Standard wurde. Sie funktioniert in den neuesten Versionen von Chrome, Edge, Firefox und Safari.

Überprüfen Sie die Unterstützung, bevor Sie Sekundenbruchteile verwenden.

if (typeof Intl.DurationFormat !== 'undefined') {
  const formatter = new Intl.DurationFormat('en', {
    style: 'digital',
    fractionalDigits: 3
  });
  return formatter.format(duration);
} else {
  return `${duration.minutes}:${duration.seconds.toFixed(3)}`;
}

Dies bietet einen Fallback für ältere Browser, während die native API verwendet wird, wenn verfügbar.