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

Browserkompatibilität

BCD tables only load in the browser

Siehe auch