DateTimeFormat.prototype.formatToParts()

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

Intl.DateTimeFormat.prototype.formatToParts() メソッドは、DateTimeFormat フォーマットによって生成されるロケール対応書式を設定可能にします

構文

Intl.DateTimeFormat.prototype.formatToParts(date)

パラメーター

date Optional
フォーマットする日付。

戻り値

フォーマットされた日付のパーツを含むオブジェクトの Array

説明

formatToParts() メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの Array を返します。formatToParts() メソッドが返却する構造は、このようになります:

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

渡される可能性がある type は以下のとおりです。

day
日付として使用される文字列。たとえば、 "17"
dayPeriod
日付期間として使用される文字列。たとえば、"AM""PM"
era
時代として使用される文字列。たとえば、"BC" や "AD"
hour
時刻として使用される文字列。たとえば、"3" や "03"
literal
日付や時刻の区切りとして使用される文字列。 たとえば、 "/"",""o'clock""de"
minute
分として使用される文字列。たとえば、"00"
month
月として使用される文字列。たとえば、"12"
second
秒として使用される文字列。たとえば、"07" や "42"
timeZoneName
タイムゾーン名として使用される文字列。たとえば、"UTC"
weekday
曜日として使用される文字列。たとえば、"M" や "Monday""Montag"
year
年として使用される文字列。たとえば、"2012" や "96"

DateTimeFormat は、ローカライズされた、不透過で直接操作できない文字列を出力します:

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"

しかし、多くのユーザーインターフェースにおいて、この文字列フォーマットをカスタマイズしたいという要望があります。formatToParts メソッドは、文字列のパーツを提供することで、DateTimeFormat フォーマットによって生成されるロケール対応書式を設定可能にします:

formatter.formatToParts(date);

// 戻り値: 
[ 
  { 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'     } 
]

情報を個別に利用してフォーマットし、独自の方法で再結合できます。たとえば、Array.prototype.map() や アロー関数switch ステートメントテンプレートリテラルArray.prototype.reduce() で使用できます。

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

formatToParts() メソッドを使用した場合、日付期間を太字にします。

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

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

ポリフィル(Polyfill)

この機能のポリフィルはproposal repositoryで利用可能です。

仕様

仕様 状態 コメント
ECMAScript Internationalization API (ECMA-402)
Intl.DateTimeFormat.prototype.formatToParts の定義
現行の標準 初期定義。

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
formatToPartsChrome 完全対応 57
補足
完全対応 57
補足
補足 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 完全対応 18Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44
補足
完全対応 44
補足
補足 Before version 58, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 58 and later use the specification defined dayPeriod. See Chromium bug 865351.
Safari 完全対応 11WebView Android 完全対応 57
補足
完全対応 57
補足
補足 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 完全対応 57
補足
完全対応 57
補足
補足 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 完全対応 56Opera Android 完全対応 43
補足
完全対応 43
補足
補足 Before version 50, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 50 and later use the specification defined dayPeriod. See Chromium bug 865351.
Safari iOS 完全対応 11Samsung Internet Android 完全対応 7.0
補足
完全対応 7.0
補足
補足 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.
nodejs 完全対応 8.0.0
補足
完全対応 8.0.0
補足
補足 Before version 12.0.0, formatToParts() returned an object with an incorrectly cased type key of dayperiod. Version 12.0.0 and later use the specification defined dayPeriod. See Chromium bug 865351.
補足 Before version 13.0.0, only the locale data for en-US is available by default. See the DateTimeFormat() constructor for more details.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連項目