Intl.DateTimeFormat.prototype.formatToParts()

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Die Intl.DateTimeFormat.prototype.formatToParts() Methode erlaubt gebietssichere Formatierung von Strings, die von DateTimeFormat Formatierungen erzeugt werden.

Syntax

Intl.DateTimeFormat.prototype.formatToParts(date)

Parameter

date Optional
Der Zeitstempel, der formatiert werden soll.

Rückgabewert

Ein Array von Objekten, die das Formatierte Datum in Teilen wiederspielgeln.

Beschreibung

Die formatToParts() Methode ist nützlich für benutzerdefinierte Formatierung von Zeitpunktsstrings. Sie gibt ein Array von Objekten zurück, die die länderspezifischen Token enthalten, aus denen benutzerdefinierte Zeichenfolgen erstellt werden können, während die länderspezifischen Teile beibehalten werden. Die Struktur, die die formatToParts()  Methode zurückgibt, sieht so aus:

[
  { type: 'day', value: '17' },
  { type: 'weekday', value: 'Monday' }
]

Mögliche Typen sind die folgenden:

day
Der String, der für den Tag benutzt wird. Zum Beispiel "17".
dayPeriod
Der String, der für die Tagesperiode benutzt wird. Zum Beispiel "AM" oder "PM".
era
Der String, der für die Ära benutzt wird. Zum Beispiel "BC" oder "AD".
hour
Der String, der für die Stunde benutzt wird. Zum Beispiel "3" oder "03".
literal
Der String, der als Trennung für das Datum und die Zeitbenutzt benutzt wird. Zum Beispiel "/", ",", "o'clock", "de", etc.
minute
Der String, der für die Minute benutzt wird. Zum Beispiel "00".
month
Der String, der für den Monat benutzt wird. Zum Beispiel "12".
second
Der String, der für die Sekunde benutzt wird. Zum Beispiel "07" oder "42".
timeZoneName
Der String, der für den Zeitzonennamen benutzt wird. Zum Beispiel "UTC".
weekday
Der String, der für den Wochentag benutzt wird. Zum Beispiel "M", "Monday" oder "Montag".
year
Der String, der für das Jahr benutzt wird. Zum Beispiel "2012" oder "96".

Beispiele

DateTimeFormat gibt lokalisierte Strings aus, die nicht direkt verändert werden können:

var date = Date.UTC(2012, 11, 17, 3, 0, 42);

var formatter = new Intl.DateTimeFormat('en-us', {
  weekday: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true,
  timeZone: 'UTC'
});

formatter.format(date);
// "Monday, 12/17/2012, 3:00:42 AM"

Oftmals ist es in vielen Benutzeroberflächen erwünscht die Formatierung dieser Strings zu verändern. Die formatToParts Methode erlaubt lokalsicheres Formatieren von Strings, die von DateTimeFormat in Teilstrings unterstützt werden:

formatter.formatToParts(date);

// return value: 
[ 
  { type: 'weekday',   value: 'Monday' }, 
  { type: 'literal',   value: ', '     }, 
  { type: 'month',     value: '12'     }, 
  { type: 'literal',   value: '/'      }, 
  { type: 'day',       value: '17'     }, 
  { type: 'literal',   value: '/'      }, 
  { type: 'year',      value: '2012'   }, 
  { type: 'literal',   value: ', '     }, 
  { type: 'hour',      value: '3'      }, 
  { type: 'literal',   value: ':'      }, 
  { type: 'minute',    value: '00'     }, 
  { type: 'literal',   value: ':'      }, 
  { type: 'second',    value: '42'     }, 
  { type: 'literal',   value: ' '      }, 
  { type: 'dayPeriod', value: 'AM'     } 
]

Jetzt sind die Informationen separiert vorhanden und  man kann Formatierungen und Konkatinationen benutzerdefiniert vornehmen. Zum Beispiel unter Einsatz von Array.prototype.map(), Arrow Funktionen, einem switch Statement, Templateliteralen und Array.prototype.reduce().

var dateString = formatter.formatToParts(date).map(({type, value}) => { 
  switch (type) {
    case 'dayPeriod': return `<b>${value}</b>`; 
    default : return value; 
  } 
}).reduce((string, part) => string + part);

Diese Beispiel macht die Tagesperiode fett, wenn die formatToParts() Methode benutzt wird.

console.log(formatter.format(date));
// "Monday, 12/17/2012, 3:00:42 AM"

console.log(dateString);
// "Monday, 12/17/2012, 3:00:42 <b>AM</b>"

Polyfill

Ein Polyfill für die Funktionalität ist im proposal repository verfügbar.

Spezifikationen

Spezifikation Status Kommentar
ECMAScript Internationalization API 4.0 (ECMA-402)
Die Definition von 'Intl.DateTimeFormat.prototype.formatToParts' in dieser Spezifikation.
Entwurf Initiale Definition

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung InternetNode.js
Grundlegende UnterstützungChrome Vollständige Unterstützung 57
Vollständige Unterstützung 57
Keine Unterstützung 55 — 60
Deaktiviert
Deaktiviert From version 55 until version 60 (exclusive): this feature is behind the --datetime-format-to-parts runtime flag.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 51IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 11WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung 57Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 56Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 11Samsung Internet Android Vollständige Unterstützung 7.0nodejs Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: schlagi123
Zuletzt aktualisiert von: schlagi123,