JavaScriptで日付をフォーマットする最も簡単な方法

それはあなたが考えるより簡単です

長年の開発者はJavaScriptの日付と時刻の書式設定について文句を言う.計算や適切なフォーマットMomentJsのようなライブラリを必要とする.
しかし、ECMAScript国際化APIのおかげで、それらの日は終わっています!私たちは、日付依存、日付と時刻の計算などの外部依存関係に依存するために必要な日です.
このポストでは、国際化のJavaScript APIを使用して日付をフォーマットする方法を示します.
目次

JavaScript Libraries VS Internationalization API

How To Format Dates in JavaScript

Intl.DateTimeFormat

Intl.RelativeTimeFormat

JavaScriptライブラリ対国際化API

私はあなたのことを知りませんが、日付、数字、および通貨の書式設定は常にJavaScriptの最も迷惑なものです.箱の外で、あなたはそれを成し遂げるために、バニラJavaScriptで多くをしなければなりませんでした.
日付順Moment.js は、強力なプレーヤーだった.彼らはそれを簡単にフォーマットを計算し、日付を持つ他のすべてのことを行う.書式設定日付はJavaScriptライブラリを使用してのみ可能です.しかし、それは広範囲な図書館でした.
しかし、ライブラリが物事を容易にするので、また、JavaScriptバンドルに多くのデータを追加します.ほとんどの場合、それは問題ではありません、しかし、あなたがパフォーマンスに集中しているならば、これは取引ブレーカーでありえます.
そういうわけで、私はとても幸せですInternationalization API . 彼らはあなたの日付、数字、回、通貨をフォーマットしましょう.このAPIの美しさは、ブラウザのサポートは、ほぼすべての主要なブラウザでほぼ100 %です.

チェックCanIUse.com for the browser support data
私はウサギの穴を下に行くと国際化APIの世界に飛び込むことをお勧めします.をお楽しみくださいライド!🎢

日付をJavaScriptでフォーマットする方法

最大の影響から始めましょう.フォーマットの日付はひどいが、とても簡単になったIntl.DateTimeFormat() and Intl.RelativeTimeFormat() . 彼らはそれを2つの方法に分けたので.

datetimeformat ()は何を行うことができますか?

The Intl.DateTimeFormat() 日付と時刻をフォーマットするのに役立ちます.それは、それらのフォーマットを実行することによって場所と言語を考慮に入れます.
以下のような形式の例はとても簡単です.

12月1日

2021 - 12 - 09

2021年8月5日

月20日(日)20 : 23

オランダ語でさえ

Int . DateTimeFormat ()の使い方。

DateTimeFormatは非常に使いやすいです.まず、設定する必要がありますIntl.DateTimeFormat コンストラクタ.いくつかの可能性があります.

new Intl.DateTimeFormat([])
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)

上の例のように簡単にコンストラクタを使用できます.ブラウザのロケールを使用する場合は、空を通過する必要がありますArray コンストラクタで.ロケールを自分で設定する場合は、文字列として渡す必要がありますen-US or nl-NL .
2番目のパラメータには、書式設定をより多くのコントロールを与えるオプションがいくつかあります.オプションは次のとおりです.

dateStyle : "full ", "long ", "medium ", "short "

timeStyle : "full ", "long ", "medium ", "short "

dayPeriod : "狭", "short "と"long "

Check the other options as well .

ご覧のように、日付と時刻の書式設定を制御する多くのオプションがあります.
以下の例では、必要なことがわかりますformat コンストラクタの後のメソッドDate .

function showDateTimeFormat() {
  const today = new Date();
  const formattedDate = new Intl.DateTimeFormat("en-US").format(today);
  const formattedDateNL = new Intl.DateTimeFormat("nl-NL").format(today);
  console.log(`
    Unformatted date:, ${today}
    Formatted date: ${formattedDate}
    Formatted date NL: ${formattedDateNL}
  `);
}
showDateTimeFormat();

このコードの結果は次のようになります.

Unformatted date:, Fri Aug 13 2021 11:09:09 GMT+0200 (Central European Summer Time)
Formatted date: 8/13/2021
Formatted date NL: 13-8-2021

これは、すべてのカレンダーの種類の風ですべての言語で日付を書式化できます.私は非常にチェックするMDN Web Docs for a lot more details .

何が可能ですか？

The Intl.RelativeTimeFormat() 日付と時刻を人間に読み取り可能な方法でフォーマットするのに役立ちます.
以下のような書式設定の例はとても簡単に作成されます!さらに良い、それはそれらの場所と言語に基づいてフォーマット.

1年前

3分後に

10秒前

明日

昨日

Intll . ListtiveTimeFormat ()の使い方。

相対的なtimeformatはIntl.DateTimeFormat . まず、設定する必要がありますIntl.RelativeTimeFormat コンストラクタ.いくつかの可能性があります.

new Intl.RelativeTimeFormat()
new Intl.RelativeTimeFormat(locales)
new Intl.RelativeTimeFormat(locales, options)

DateTimeFormatのように、ReltiveTimeFormatは同じ方法でロケールを使用しています.空を通り過ぎるArray , ブラウザのデフォルトロケールを選択します.しかし、あなたが加えるならばen or nl この言語は書式化に使用されます.
コンストラクタの2番目のパラメータでは、いくつかのオプションを追加できます.(詳細はチェックするMDN Web Docs )

localMatcher : "ルックアップ"または"ベストフィット"

numeric : “常に”または“自動”(あなたは“1日前”の代わりに“昨日”のような値を期待することができますautoで」

style : "long "、"short "または"狭い"

これは、すべてのカレンダーの種類の風ですべての言語での相対的な時間の書式化になります.私は非常にチェックするMDN Web Docs for a lot more details .
使うIntl.RelativeTimeFormat , あなたの日付を計算する必要があります.あなたはそれを自分でできるdate-fns 日付を扱う最高のモジュラーJavaScriptライブラリの1つ.したがって、この例では、そのライブラリを使用します.
実行中の日付fnsをインストールするnpm install date-fns .

import { differenceInHours } from 'date-fns';

const diff = differenceInHours(
  new Date(2021, 6, 2, 19, 0),
  new Date(2021, 6, 2, 6, 50)
)

const rtf = new Intl.RelativeTimeFormat("en");
const rtf2 = new Intl.RelativeTimeFormat("nl");

console.log(rtf.format(diff, 'hour')) // Result: "1,300 hours ago"
console.log(rtf2.format(diff2, 'hour')) // Result: "1.300 uur geleden"

ご覧の通り、結果はかなり便利です.出力を手動で翻訳する必要はありません.しかし、簡単に言語を変更することができ、ユーザーは読み取り可能な文字列を取得します.

Check the RunKit example

このコンストラクターを使用すると、以前に必要なライブラリが必要でした.はい、日付fnsで、あなたもこれを行うことができます.しかし、ブラウザが楽に行うことができる場合は、なぜそのためのライブラリを使用します.
日付fnsについての大きなことは、それがモジュラーです.使用しないものはコードに含まれません.あなたのコードベースを小さく保つために便利です.

結論

私は、これらの開発者フレンドリーなブラウザーAPIを開発している彼らの時間を費やしているすべてのそれらの知的な人々に非常に感謝します.それで、それらを使用して、私たちのコードベースをできるだけ小さくしましょう.

ありがとう

私はあなたが何か新しいことを学んだか、この物語を読んだ後、何か新しいものを作成することに触発されて願っています!🤗 もしそうならば、電子メール(このページの最上部へスクロールする)を通して購読するか、HashNodeでここで私について来てください.
*

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

私が質問または何かを応答として言うためにあなたを残したならば、スクロールして、私にメッセージを入力してください.あなたがそれを秘密にしたいとき、私に送ってください.私のDMは常に開いている😁