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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung InternetNode.js
formatToPartsChrome Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise Before version 71, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 71 and later use the specification defined dayPeriod. See Chromium bug 865351.
Edge Vollständige Unterstützung 18Firefox Vollständige Unterstützung 51IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 11WebView Android Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise Before version 71, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 71 and later use the specification defined dayPeriod. See Chromium bug 865351.
Chrome Android Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise Before version 71, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 71 and later use the specification defined dayPeriod. See Chromium bug 865351.
Firefox 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
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch