Important!: This article as been written almost 2 years ago Temporal updated their API and is even more awesome now - Part two of the article coming soon!

彼らのキャリアのいくつかの時点ですべての開発者は、日付と時刻を再生する必要があった場合は幸運です.あなたが旅しているときにのみタイムゾーンに対処する必要がありました.
JavaScriptのコミュニティ＆開発者は、独自のライブラリを開発することによって、または瞬間のような一般的なソリューションを使用して、日付のFNSやDayJsの間でさまざまな方法でこれを解決しようとしている.ブログ一覧にもどるFixing JavaScript Date .

「それはまだ私のパッケージにあります。

これらのすべての人々や、これらのライブラリで素晴らしい仕事をしたコミュニティに対して何も持っていない、私はそれが一度にこの長年の問題を解決する標準の一部である解決策を持っている時間だと信じている.代わりに、我々は構築することができますmoment ブラウザにも.

ダニエルEhrenberg
リトルレダン

私の同僚は、JavaScriptの組み込みの日付時刻ライブラリのステージ2 TC 39の提案を一時的に取り組んでいます.NPMのポリフィルを試してみて、フィードバックを与えるために我々の調査に答えてください!twitter.com/therealptomato…
午後7時06分- 2020年7月23日
フィリップ
@ therealptomato
@ bloombergtechと共同で@ igaliaで働いてきたことはここにあります.これはあなたのチャンスを試してみるとフィードバックを与えることです.
https://t.co/Dsalt6mSqh

「時間はここです・・・これは何ですか？」

Timeは新しいステージであり、EcmasScriptの土地に最新の日付/時刻APIをもたらすステージ2に既にある.

At the time of writing there is no browser implementation yet, a polyfill is available at npm, please give it a try and provide feedback.

時間についてのクールなもの？

日付と時刻の計算のための使いやすいAPIを提供する

不変のオブジェクトだけを扱う

厳密に指定された文字列形式を解析する

非グレゴリオ暦をサポートし、ユーザの現地時間とUTC以外のタイムゾーンをサポートする

まだ実験的なAPIであるが、うまくいけば、それは最終的に標準的で、JS

ローカルの認識、サポートタイムゾーンとロケールデフォルトでは、余分なプラグインやデータが必要です

これは、簡単にAPIだけでなく、他のライブラリによく埋め込むと直接使用するように設計されて

概要

この概要は、私がプロジェクトで最も使用する機能をカバーします.そして、この概要を通して達成しようとしている目標と非目標を知りたいです.

概略

いくつかのAPIを提供し、ハイライト表示する時間

人間工学と機能を既存のライブラリと比較する

学び、理解する

私の使用と経験から貴重なフィードバックを提供するTemporal

このポストはすべてのAPI面をカバーしませんdocumentation それはすばらしいexamples .また、任意のベンチマークを省略-ポリフィルは遅いかもしれないが、それはまだ最適化されていないためです.

用途

Intentionally no configuration or extra plugins for time zone & locales are used, this is required by some libraries and may affect results that won't be showing accordingly with my time zone(Europe/Madrid) or locale(es-ES).

日付

// Temporal
Temporal.now.date().day;

// moment
moment().date();

// dayjs
dayjs().date();

// date-fns
import { getDate } from 'date-fns';
getDate(new Date());

// => 14 (Current Day)

曜日

// Temporal
Temporal.now.date().dayOfWeek;

// moment
moment().day();

// dayjs
dayjs().day();

// date-fns
import { getDay } from 'date-fns';
getDay(new Date());

// => 2 (Current Day of Week)

追加

// Temporal
Temporal.now.absolute().plus({ days: 7 });
// => 2020-07-22T13:03:01.419163174Z

// moment
moment().add(7, 'days');
// => Wed Jul 22 2020 15:03:24 GMT+0200

// dayjs
dayjs().add(7, 'day');
// => Wed, 22 Jul 2020 13:03:52 GMT

// date-fns
import { add } from 'date-fns';
add(new Date(), { days: 7 });
// => 2020-07-22T13:04:37.366Z

減算する

// Temporal
Temporal.now.absolute().minus({ days: 7 });
// => 2020-07-08T13:07:17.807181419Z

// moment
moment().subtract(7, 'days');
// => Wed Jul 08 2020 15:08:03 GMT+0200

// dayjs
dayjs().subtract(7, 'day');
// => Wed, 08 Jul 2020 13:08:24 GMT

// date-fns
import { sub } from 'date-fns';
sub(new Date(), { days: 7 });
// => 2020-07-08T13:08:54.558Z

差異

const startDate = new Date('1986-07-1');
const endDate = new Date('2020-07-1');

// Temporal
const temporalStart = Temporal.Absolute.from(startDate.toISOString());
const temporalEnd = Temporal.Absolute.from(endDate.toISOString());
const temporalDiff = temporalEnd.difference(temporalStart, {
  largestUnit: 'days',
});
console.log(temporalDiff.toString());
// => P12419D (ISO 8601 notation)
// Or `temporalDiff.days`
// => 12419

// moment & dayjs have similar API
const momentStart = moment(startDate);
const momentEnd = moment(endDate);
const momentDiff = momentEnd.diff(momentStart, 'days');
console.log(momentDiff.toString());
// => 12419

// date-fns
import { differenceInDays } from 'date-fns';
differenceInDays(startDate, endDate); //=> -12419
differenceInDays(endDate, startDate); //=> 12419

期間

// Temporal
new Temporal.Duration(0, 0, 0, 0, 23, 59, 59);
Temporal.Duration.from({ hours: 23, minutes: 59, seconds: 59 });

// moment
moment.duration('23:59:59');
moment.duration({ hours: 23, minutes: 59, seconds: 59 });

// dayjs
// => This dependent on `Duration` plugin to work

// .toString() output
// => PT23H59M59S
// => PT23H59M59S

// date-fns
import formatISODuration from 'date-fns/formatISODuration'; // ESM export is not working
formatISODuration({ hours: 23, minutes: 59, seconds: 59 });
//=> P0Y0M0DT23H59M59S

月の日

// Temporal
new Temporal.YearMonth(2020, 2).daysInMonth;
new Temporal.YearMonth(2021, 2).daysInMonth;

// Moment
moment('2020-02', 'YYYY-MM').daysInMonth();
moment('2021-02').daysInMonth();

// DayJS
dayjs('2020-02').daysInMonth();
dayjs('2021-02', 'YYYY-MM').daysInMonth();

// date-fns
import { getDaysInMonth } from 'date-fns';
// https://date-fns.org/v2.14.0/docs/getDaysInMonth
getDaysInMonth(new Date(2020, 1));
getDaysInMonth(new Date(2021, 1));

// Output
// => 29
// => 28

比較する

// Temporal
const t1 = Temporal.Date.from('2020-02-20');
const t2 = Temporal.Date.from('2020-03-21');
Temporal.Date.compare(t1, t2); //=> `−1` if one comes before two;
Temporal.Date.compare(t2, t1); //=> `1` if one comes after two.
Temporal.Date.compare(t2, t2); //=>  `0` if one and two are the same;

// moment & dayjs have similar API
const m1 = '2020-02-20';
const m2 = '2020-03-21';
moment(m1).isBefore(m2); // => true
moment(m1).isAfter(m2); // => false
moment(m1).isSame(m1); // => true

// date-fns
import { compareAsc, compareDesc } from 'date-fns';
const fns1 = new Date('2020-02-20');
const fns2 = new Date('2020-03-21');
compareAsc(fns1, fns2); //=> `-1` if the first date is before the second
compareAsc(fns2, fns1); //=> `1` if the first date is after the second
compareAsc(fns2, fns2); //=> `0` if dates are equal.
compareDesc(fns1, fns2); //=> `1` if the first date is before the second
compareDesc(fns2, fns1); //=> `-1` if the first date is after the second
compareDesc(fns2, fns2); //=> `0` if dates are equal.

I 18 N

// Temporal
Temporal.now.date().toLocaleString('es-ES', {
  weekday: 'long',
}); // => martes

// moment (only works loading locale strings separately - 4.04 KB)
moment().locale('es-ES').format('dddd'); //=> martes

// dayjs (only works loading locale strings separately - 1.01 KB)
dayjs().locale('es-ES').format('dddd'); //=> martes

// date-fns only works import locale strings separately - no size info)
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
format(new Date(), 'cccc', { locale: es }); //=> martes

総括

第一印象

私が以前書いたようにTemporal 提案はステージ2ですが、すでに非常に良い形です.機能は、使用ケース、日付と時刻、別のカレンダーシステム、タイムゾーンなどでの作業の広いスペクトルをカバーしています.
APIの表面と他のすべてのintlbuilt-in オブジェクトは、国際化と共にブラウザで日付/時刻を扱うこの長年のジレンマに重要な役割を果たします.
APIはアクセス可能で使いやすく、良いdocumentation .

採用

Temporal はstandards そして、TC39 process ECMAScript言語の一部となり、ブラウザで実装されます.
採用は、以下を含むことから始めることができますproposal-temporal プロジェクトにおけるポリフィルfollowing the instructions .
Voilaaa!これ以上余分な依存関係、これ以上のローディングロケール固有のデータと完全な機能.

ポリフィルを覚えて"...is code that implements a feature on web browsers that do not support the feature..." , 彼らはサポートを行う場合は、ライブラリを使用してからの大きな違いは必要ありません.

note: specification text, documentation and polyfill at time of writing still under development and should be understood non-production ready.

利益と機会

利用者

シンプルで人間工学に基づいたAPIの日付/時刻と時間帯をブラウザで処理する

依存関係がない(余分なデータはない.

うまくいくIntl , これは、高品質の日付と時刻の書式設定を提供する多くの言語やオプション

複数の選択肢と1つの一部ですstandards

図書館用

安定してリーンAPIの上部に機能を構築する

タイムゾーンやロケールに余分なデータをロードする必要性を減らす

バンドルサイズ

プレゼント

図書館moment(12.443.725) , date-fns(6.499.163) and dayJS(1.941.696) 合計20 m週間のダウンロードは、これは、言語に直接ソリューションを持つ必要性を検証する一方で、これらの数字は、将来の影響について明確な指標ですTemporal JavaScriptの風景になります.
この新しいAPIはまた、あなたの例を持っている既存のものに将来の改善のための基盤を舗装しているIntl.DisplayNames それはTemporal さらに多くのオプションを提供するカレンダーread more here ).

未来

Temporal , 前に彼らの前にマラソンが広く受け入れられている、これは我々が知っている基準のほとんどで起こった_.assign() 対Object.assign() など遷移プロセスは明確に定義された経路を必要とし、それから自然に続く.
私はそれらの図書館のために道の終わりを見ません、しかし、より多くの可能性はゴールを達成する感覚です.将来有望な、そして、異なる相乗効果は、この新しいstandard .

ヘルプとフィードバック

決して標準には、音声を持って簡単に、テストによって開始することができますし、ドキュメントを読んでfeedback form または開くことによってGithub issues アイデアやフィードバックを作ることに役立つことができますTemporal さらに良い.
全体的に、私はいくつかの懸念を持ってTemporal , 私は問題のトラッカーのような問題に関して私が上げてきた#770 , #772 . JSデイトライブラリから一時的なものへの移行が正確にどのように働くかについて、私には不明瞭なままです.したがって、私は方向を見つけるのを助けるために、時間の問題トラッカーに参加していました.私はあなたがあなたの考えを共有することを望む!
👏 すべてのライブラリの著者への功績は、この時間中に我々の背中を維持してTemporal それは言語の一部を作るために一生懸命働いているチーム.
あなたがこのポストについてあなたが何を考えるかについて知らせてください、そして、私はあなたがそれを楽しんだことを望みます.
私がこの記事をレビューするのを手伝ったすべての人々に感謝します.