Intl.DateTimeFormat.prototype.formatToParts()

Experimental

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 (ECMA-402)
Die Definition von 'Intl.DateTimeFormat.prototype.formatToParts' in dieser Spezifikation.
Lebender Standard Initiale Definition

Browserkompatibilit├Ąt

BCD tables only load in the browser

Siehe auch