JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

Objectオブジェクトを勉強しているときに、時間のフォーマットを簡単に実装できるtoLocaleString()メソッドを見つけました。

1. 時刻表示に関する従来の考え方

通常のアイデアは、簡単な書式設定の例のように、Date インスタンスを通じて年、月、日などを順番に取得することです。

Date.prototype.format = function(dateStr) {
    date = new Date();
    年 = date.getFullYear();
    月 = date.getMonth() + 1 とします。
    day = date.getDate().toString().padStart(2, "0"); とします。
    時間 = date.getHours();
    分を date.getMinutes() とします。
    秒を date.getSeconds() とします。
    dateStr = dateStr.replace("年", year)
        .replace("月", 月)
        .replace("日", day)
        .replace("時間", 時間)
        .replace("分", 分)
        .replace("秒", second);
    dateStr を返します。
};
 
// 上記の方法を使用する console.log(new Date().format("year-month-day")); // 2021-11-04

2. 時刻の書式設定 toLocaleString()

toLocaleString() 、オブジェクトの文字列を返すという点でtoString()に似ていますが、ローカライズされた実行環境に従って処理されます。特に、時間オブジェクトをサポートしており、特定の形式に変換できます。

// 日付、現在の時刻を出力 let date = new Date();
// これはグリニッジ標準時の形式です console.log(date.toString()); // 2021 年 11 月 4 日木曜日 10:11:35 GMT+0800 (中国標準時)
// これはローカルタイム形式です console.log(date.toLocaleString()); // 2021/11/4 10:18:08 AM


新しいブラウザ バージョンでは、ロケールとオプション パラメータがサポートされます。

date = new Date();
// 24時間制 let options = {
    年: '数値'、月: '数値'、日: '数値'、
    時間: '数値'、分: '数値'、秒: '数値'、
    時間12: 偽
};
console.log(date.toLocaleString("zh-CN", オプション)); // 2021/11/4 10:33:01


曜日を取得します:

date = new Date();
オプション = {
    平日:「長い」
};
console.log(date.toLocaleString("zh-CN", options)); // 木曜日

その他のoptionsパラメータについては、記事の最後に記載されているリンクを参照してください。

欠陥:

x 年 x 月 x 日の形式で表示したい場合、現時点では適切な記述方法はありません。比較的、toLocaleString() 関数の方が制限が厳しいと言えます。

これで、 JavaScript toLocaleString() JavaScript toLocaleString()に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の isPrototypeOf 関数
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript の構成と継承の説明
  • jsイベント委譲の詳細な説明
  • nuxt.js 複数の環境変数の設定
  • JS における for、for...in、for...of、forEach の違いと使用例
  • Javascriptはセキュリティ検証に整合性属性を使用します

<<:  HTML の空リンク href="#" と href="javascript:void(0)" の違い

>>:  CSSを使用してAndroidシステムの読み込みアニメーションを実装する

推薦する

border-radius 値の設定に関する質問

問題記録今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のよ...

MySQL無料インストール版のパスワードの設定と変更に関するチュートリアル

ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

MySQLフィールドのデフォルト値を設定する方法

目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...

2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

ミニプログラムは左スライドのドロワーメニューをネイティブに実装します

目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...

docker によってプルされたイメージがどこに保存されるかの詳細な説明

20200804追記:記事の内容に誤りがある可能性があります。他の回答を検索することもできます。 d...

インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

inline-block について学習しているときに、境界線と inline-block を持つ複数...

Vueフロントエンドパッケージングの詳細なプロセス

目次1. パッケージ化コマンドを追加する2. パッケージ化されたコードを実行する3. パッケージ化し...

画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...

Windows での自動展開に Jenkins を使用するチュートリアル図

今日は、Jenkins + powershell スクリプトを使用して、.NET CORE スクリプ...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...