国際相対時間フォーマットAPI:Intel.RelativeTimeFormat

原文:The Intel.RelativeTimeFormat API作者:Mathias Bynens(@mathias)
現代のWebアプリケーションでは、完全な日付やタイムスタンプではなく、「昨日」、「42秒前」、「3ヶ月」などのフレーズが一般的に使用されています.この相対的な時間フォーマットは、いくつかのポピュラーなライブラリがローカライズフォーマットの関数を実現するほど一般的になっています.(Moment.js、Globalize、date-fnsなど)
ローカライズされた相対時間フォーマットを実装する問題の1つは、「昨日」や「前四半期」など、各言語に慣習語やフレーズのリストを提供する必要があることです.Unicode CLDRはこのデータを提供していますが、JavaScriptで使用するには、ライブラリコードに埋め込んで一緒に提供する必要があります.残念なことに、これらのライブラリのパケットサイズは、スクリプトのロード時間、解析/コンパイルコスト、メモリ消費に影響を与えるに違いありません.
新しいIntl.RelativeTimeFormatAPIはこの負担をJavaScriptエンジンに移行し、JavaScriptエンジンは言語環境データを提供し、JavaScript開発者に直接使用させることができる.Intl.RelativeTimeFormat相対時間のローカライズフォーマットは、パフォーマンスを犠牲にすることなく実現される.
使用法と例
次の例では、英語を使用して相対時間フォーマットプログラムを作成する方法を示します.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

rtf.format(8, 'hour');
// → 'in 8 hours'

rtf.format(-2, 'day');
// → '2 days ago'

rtf.format(3, 'week');
// → 'in 3 weeks'

rtf.format(-5, 'month');
// → '5 months ago'

rtf.format(2, 'quarter');
// → 'in 2 quarters'

rtf.format(-42, 'year');
// → '42 years ago'

Intl.RelativeTimeFormatコンストラクション関数に渡されるパラメータは、BCP 47言語タグ、または複数の言語タグを含む配列である必要があることに留意されたい.
以下に、他の言語(中国語簡体字中国語)を用いた例を示す.

const rtf = new Intl.RelativeTimeFormat('zh'); //   'zh-Hans-CN'

rtf.format(3.14, 'second');
// → '3.14   '

rtf.format(-15, 'minute');
// → '15   '

rtf.format(8, 'hour');
// → '8   '

rtf.format(-2, 'day');
// → '2  '

rtf.format(3, 'week');
// → '3  '

rtf.format(-5, 'month');
// → '5   '

rtf.format(2, 'quarter');
// → '2    '

rtf.format(-42, 'year');
// → '42  '

また、Intl.RelativeTimeFormatコンストラクション関数は、出力を細粒度制御できるオプションoptionsパラメータを受け入れる.柔軟性を説明するには、デフォルト設定に基づいてより多くの出力を表示します.

//                  ，      。
//       ，             
const rtf = new Intl.RelativeTimeFormat('zh', {
 localeMatcher: 'best fit', //    : 'lookup'
 style: 'long', //    : 'short'   'narrow'
 numeric: 'always', //    : 'auto'
});

rtf.format(-1, 'day');
// → '1  '

rtf.format(0, 'day');
// → '0  '

rtf.format(1, 'day');
// → '1  '

rtf.format(-1, 'week');
// → '1  '

rtf.format(0, 'week');
// → '0  '

rtf.format(1, 'week');
// → '1  '

上記のフォーマットプログラムでは、'1 'ではなく文字列' 'が生成され、'0 'ではなく、' 'が弱いように見えます.これは、デフォルトでフォーマットプログラムが数値を使用して出力されるためです.
この動作を変更するには、numericオプションを'auto'に設定します(デフォルトは'always'です).

const rtf = new Intl.RelativeTimeFormat('zh', { numeric: 'auto' });

rtf.format(-1, 'day');
// → '  '

rtf.format(-2, 'day');
// → '  '

rtf.format(0, 'day');
// → '  '

rtf.format(1, 'day');
// → '  '

rtf.format(2, 'day');
// → '  '

rtf.format(-1, 'week');
// → '  '

rtf.format(0, 'week');
// → '  '

rtf.format(1, 'week');
// → '  '

Analogous to other Intl classes, Intl.RelativeTimeFormat has a formatToParts method in addition to the format method. Although format covers the most common use case, formatToParts can be helpful if you need access to the individual parts of the generated output:
他のIntlクラスと同様に、Intl.RelativeTimeFormatメソッドに加えて、formatメソッドがあります.formatToPartsは最も一般的な例をカバーしていますが、生成された出力の各セクションにアクセスする必要がある場合は、formatが役立ちます.

const rtf = new Intl.RelativeTimeFormat('zh', { numeric: 'auto' });

rtf.format(-1, 'day');
// → '  '

rtf.formatToParts(-1, 'day');
// → [{ type: 'literal', value: '  ' }]

rtf.format(3, 'week');
// → '3  '

rtf.formatToParts(3, 'week');
// → [
//  { type: 'integer', value: '3', unit: 'week' },
//  { type: 'literal', value: '  ' }
// ]

その他のオプションとその動作の詳細については、API docs in the proposal repositoryを参照してください.
結論formatToPartsデフォルトではV 8 v 7.1.179およびChrome 71で使用可能です.このAPIがより広く利用できるようになるにつれて、MomentなどのAPIが発見されます.js、Globalize、date-fnsなどのライブラリは、コードライブラリからハードコーディングCLDRデータベースへの依存性を除去し、ネイティブの相対時間フォーマット機能を使用することで、ロード時のパフォーマンス、分析、コンパイル時のパフォーマンス、実行時のパフォーマンス、メモリの使用を向上させます.
関連リンク

Intl.RelativeTimeFormat Spec Proposal

The ECMAScript Internationalization API