JavaScript日期格式化技巧分享

更新時間：2024年10月28日 08:29:12 作者：自由的巨浪

在 JavaScript 中,日期和時間的處理與格式化是非常常見的需求,JavaScript 提供了內置的 Date 對象用于操作日期和時間,但它的格式化功能較為有限,為了更方便地格式化日期,通常需要結合一些額外的工具或庫,本文涵蓋了從基礎到進階的日期格式化技巧

導讀

在 JavaScript 中，日期和時間的處理與格式化是非常常見的需求。JavaScript 提供了內置的 Date 對象用于操作日期和時間，但它的格式化功能較為有限。為了更方便地格式化日期，通常需要結合一些額外的工具或庫。本文涵蓋了從基礎到進階的日期格式化技巧。

使用原生 Date 對象

我們可以通過多種方式創(chuàng)建 Date 對象，例如傳入特定的時間戳、字符串或指定的年、月、日、時、分、秒。

const date = new Date();
const date1 = new Date(2024, 8, 13); // 注意：月份從0開始
const date2 = new Date("2024-09-13T10:20:30Z");
const date3 = new Date(1694596830000); // 時間戳

獲取日期和時間的各個部分

JavaScript 提供了各種方法來獲取日期的不同部分，例如年、月、日、小時、分鐘等。

const date = new Date();
console.log(date.getFullYear()); // 獲取年份
console.log(date.getMonth()); // 獲取月份，0表示1月，11表示12月
console.log(date.getDate()); // 獲取當月的某一天
console.log(date.getHours()); // 獲取小時
console.log(date.getMinutes()); // 獲取分鐘
console.log(date.getSeconds()); // 獲取秒
console.log(date.getDay()); // 獲取星期幾，0表示星期天

格式化日期字符串

默認情況下，Date 對象提供了幾種內置的方法將日期轉換為字符串：

toDateString(): 返回日期的簡短表示形式，例如 "Fri Sep 13 2024".
toTimeString(): 返回時間部分，例如 "10:20:30 GMT+0000 (Coordinated Universal Time)".
toISOString(): 返回標準的 ISO 8601 格式，例如 "2024-09-13T10:20:30.000Z".
toLocaleDateString(): 根據本地化設置格式化日期。
toLocaleTimeString(): 根據本地化設置格式化時間。

const date = new Date();
console.log(date.toISOString()); // 2024-09-13T10:20:30.000Z
console.log(date.toDateString()); // Fri Sep 13 2024
console.log(date.toLocaleDateString('zh-CN')); // 2024/9/13
console.log(date.toLocaleString('en-US')); // 9/13/2024, 10:20:30 AM

自定義格式化

在實際的開發(fā)中，除了通過原生的 Date 對象獲取日期數據外。需要使用自定義日期格式也是相當大的一部分應用場景，這時則需要通過手動拼接或使用正則表達式從 Date 對象中提取不同的部分。例如：

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份加1，確保是兩位數
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const date = new Date();
console.log(formatDate(date)); // 2024-09-13 10:20:30

以上是一個基礎版本的自定義格式化方法，我們可以再擴展一下，讓它支持自定義的時間格式：

function formatDate(date, format = "yyyy-MM-dd HH:mm:ss") {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const toSymbol = () => {
      return hours > 12 ? "PM" : "AM";
    };
    const hasSymbol = format.indexOf('a') > -1
    const symbols = {
      yyyy: year,
      MM: `${month}`.padStart(2, "0"),
      dd: `${day}`.padStart(2, "0"),
      HH: `${hours}`.padStart(2, "0"),
      hh: hasSymbol && hours > 12 ? hours - 12 : hours,
      mm: `${minutes}`.padStart(2, "0"),
      ss: `${seconds}`.padStart(2, "0"),
      // a 表示12小時制
      a: toSymbol(),
    };
    let time = format;

    Object.keys(symbols).forEach((key) => {
      time = time.replace(key, symbols[key]);
    });

    return time;
}

// 2024-10-26 PM 1:06:43 12 小時制
console.log(formatDate(new Date(), "yyyy-MM-dd a hh:mm:ss"));

本地化格式化

除了對日期自定義格式的格式化需求，針對大型的平臺型項目，就需要本地化格式化或者說是國際化的日期格式化支持，新的 Intl.DateTimeFormat API 為我們國際化日期格式提供了標準接口。

Intl.DateTimeFormat

Intl.DateTimeFormat 是 JavaScript 語言內置的國際化工具，允許我們以本地化方式格式化日期。

const date = new Date();
const formatter = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
});
console.log(formatter.format(date)); // 2024/09/13 10:20:30

你可以通過修改選項來控制輸出格式，例如：

year, month, day：控制日期部分
hour, minute, second：控制時間部分
hour12: 是否使用12小時制

Intl.DateTimeFormat 的瀏覽器兼容性

Intl.DateTimeFormat 的瀏覽器支持情況還是比較理想的，如果你希望使用標準的日期國際化格式的解決方案，Intl.DateTimeFormat 目前是一個不錯的選擇。

處理時區(qū)

除了處理個性化的日期格式，國際化的日期格式外，另外一個對于大型應用需要處理的一個日期的問題就是處理跨時區(qū)的日期數據。

原生 JavaScript 時區(qū)

JavaScript 原生的 Date 對象默認會根據系統的時區(qū)顯示時間。如果需要轉換時區(qū)，可以使用 toLocaleString 方法：

const date = new Date();
console.log(date.toLocaleString('en-US', { timeZone: 'America/New_York' })); // 轉換為紐約時間

使用 moment-timezone

// 安裝 moment-timezone：npm install moment-timezone
const moment = require('moment-timezone');
const newYorkTime = moment.tz("America/New_York").format('YYYY-MM-DD HH:mm:ss');
console.log(newYorkTime); // 紐約當前時間

使用 dayjs 時區(qū)插件

const dayjs = require('dayjs');
const utc = require('dayjs/plugin/utc');
const timezone = require('dayjs/plugin/timezone');
dayjs.extend(utc);
dayjs.extend(timezone);

const newYorkTime = dayjs().tz("America/New_York").format('YYYY-MM-DD HH:mm:ss');
console.log(newYorkTime); // 紐約當前時間

使用第三方庫

除了自己親歷親為處理各種日期格式問題外，使用第三方庫來處理日期格式問題也是一個不錯的選擇。下面將介紹一些主流的處理日期數據第三方庫。

Moment.js （不推薦用于新項目）

雖然 Moment.js 曾經是處理日期的標準庫，但由于體積大、性能問題，已經不再推薦使用新項目。官方建議使用原生 API 或其他更輕量的庫。

// 安裝 Moment.js：npm install moment
const moment = require('moment');
const date = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(date); // 2024-09-13 10:20:30

Day.js

Day.js 是一個現代的、輕量級的日期處理庫，API 設計類似于 Moment.js。

// 安裝 Day.js：npm install dayjs
const dayjs = require('dayjs');
const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
console.log(date); // 2024-09-13 10:20:30

Day.js 支持多種插件擴展，例如時區(qū)、相對時間等。

date-fns

date-fns 是另一個流行的日期處理庫，功能強大且模塊化。你可以根據需要僅引入部分功能。

// 安裝 date-fns：npm install date-fns
const { format } = require('date-fns');
const date = new Date();
console.log(format(date, 'yyyy-MM-dd HH:mm:ss')); // 2024-09-13 10:20:30

date-fns 提供了許多實用函數，如格式化、比較、時間計算等，非常適合處理復雜的日期操作。