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 4.0 (ECMA-402)
Intl.DateTimeFormat.prototype.formatToParts の定義
ドラフト 初期定義。

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 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 完全対応 あり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.
Edge Mobile 未対応 なしFirefox Android 完全対応 56Opera Android 未対応 なしSafari iOS 完全対応 11Samsung Internet Android 完全対応 7.0nodejs 完全対応 あり

凡例

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

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mkato, segayuu, YuichiNukiyama
最終更新者: mdnwebdocs-bot,