So zeigen Sie Sekundenbruchteile in der Daueranzeige an

Zeigen Sie Subsekundenpräzision in formatierten Zeitspannen an

Einführung

Wenn Sie Dauern 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 Rennzeitmesser 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", obwohl sie "1,234 s" mit einem Komma als Dezimaltrennzeichen erwarten. Verschiedene Locales verwenden unterschiedliche Dezimaltrennzeichen und Abstandskonventionen.

JavaScript bietet die Option fractionalDigits in Intl.DurationFormat, um zu steuern, wie Sekundenbruchteile in formatierten Dauern erscheinen. Diese Lektion erklärt, wie Sie Sekundenbruchteile zu Daueranzeigen hinzufügen und deren Präzision steuern.

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 Millisekundenpräzision an. Die Einstellung fractionalDigits: 6 zeigt Mikrosekundenpräzision an.

Dauern ohne Sekundenbruchteile formatieren

Standardmäßig zeigt die Dauerformatierung ganze Sekunden ohne Bruchteilkomponente 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.

Sekundenbruchteile zu Zeitdauern hinzufügen

Die Option fractionalDigits steuert, wie viele Dezimalstellen im Sekundenwert erscheinen. 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 das Gebietsschema.

Präzision der Sekundenbruchteile steuern

Die Option fractionalDigits akzeptiert Werte von 0 bis 9. Dies bestimmt, wie viele Ziffern nach dem Dezimaltrennzeichen 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 Ziffern ü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 bei einem 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"

Sekundenbruchteile in verschiedenen Gebietsschemata formatieren

Verschiedene Gebietsschemata 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 das korrekte Dezimaltrennzeichen, die Ziffernzeichen und den Abstand für jedes Gebietsschema.

Stoppuhr-Zeiten formatieren

Stoppuhr-Anwendungen müssen verstrichene Zeit mit Subsekundenprä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.

Rennzielzeiten formatieren

Sportzeitnahmesysteme 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 präzise Rennzeitmessung.

Leistungsmetriken formatieren

Leistungsprofiler zeigen Ladezeiten und Ausführungszeiten mit Subsekundenpräzision an. Verwenden Sie 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 Leistungsmetriken in einem kompakten Format mit Millisekunden-Präzision an.

Video-Frame-Zeitstempel formatieren

Videobearbeitungsanwendungen zeigen framegenau Zeitstempel an. Verwenden Sie Sekundenbruchteile basierend auf der Framerate.

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.

Millisekunden in Sekundenbruchteile umwandeln

Zeitberechnungen erzeugen oft Millisekunden. Wandeln Sie Millisekunden in Sekundenbruchteile um, indem Sie durch 1000 dividieren.

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 wandelt ganze Millisekunden in einen Sekundenbruchteilwert um.

Sehr kleine Zeitspannen handhaben

Für Zeitspannen unter einer Sekunde geben Sie nur die Sekundeneinheit mit Dezimalstellen an.

const duration = { seconds: 0.045 };

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

Die Null vor dem Dezimalkomma zeigt eine Subsekundenzeitspanne an.

Präzision für Ihren Anwendungsfall wählen

Verschiedene Anwendungen erfordern unterschiedliche Präzisionsstufen:

  • Stoppuhren: 2 Dezimalstellen (Hundertstelsekunden)
  • Sportzeitmessung: 3 Dezimalstellen (Millisekunden)
  • Leistungsprofiling: 3 Dezimalstellen (Millisekunden)
  • Wissenschaftliche Messungen: 6-9 Dezimalstellen (Mikrosekunden bis Nanosekunden)

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

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

// For general timing
new Intl.DurationFormat(locale, {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "0:00:01.23"

// For precise measurements
new Intl.DurationFormat(locale, {
  style: 'short',
  fractionalDigits: 6
}).format(duration);
// "1.234568 sec"

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

Sekundenbruchteile bei Bedarf weglassen

Setzen Sie fractionalDigits: 0, um ganze Sekunden ohne Sekundenbruchteile 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

Das Erstellen von Formattern mit spezifischen Präzisionseinstellungen folgt derselben Performance-Optimierung wie andere Formatter.

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 Formatter-Instanz wieder für bessere Performance beim Formatieren mehrerer Zeitdauern.

Browser-Unterstützung

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

Prü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 und verwendet gleichzeitig die native API, wenn verfügbar.