欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript日期格式化技巧分享

 更新時(shí)間：2024年10月28日 08:29:12   作者：自由的巨浪  
在 JavaScript 中,日期和時(shí)間的處理與格式化是非常常見(jiàn)的需求,JavaScript 提供了內(nèi)置的 Date 對(duì)象用于操作日期和時(shí)間,但它的格式化功能較為有限,為了更方便地格式化日期,通常需要結(jié)合一些額外的工具或庫(kù),本文涵蓋了從基礎(chǔ)到進(jìn)階的日期格式化技巧

導(dǎo)讀

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

使用原生 Date 對(duì)象

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

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

獲取日期和時(shí)間的各個(gè)部分

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

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

格式化日期字符串

默認(rèn)情況下，Date 對(duì)象提供了幾種內(nèi)置的方法將日期轉(zhuǎn)換為字符串：

  • toDateString(): 返回日期的簡(jiǎn)短表示形式，例如 "Fri Sep 13 2024".
  • toTimeString(): 返回時(shí)間部分，例如 "10:20:30 GMT+0000 (Coordinated Universal Time)".
  • toISOString(): 返回標(biāo)準(zhǔn)的 ISO 8601 格式，例如 "2024-09-13T10:20:30.000Z".
  • toLocaleDateString(): 根據(jù)本地化設(shè)置格式化日期。
  • toLocaleTimeString(): 根據(jù)本地化設(shè)置格式化時(shí)間。
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

自定義格式化

在實(shí)際的開(kāi)發(fā)中，除了通過(guò)原生的 Date 對(duì)象獲取日期數(shù)據(jù)外。需要使用自定義日期格式也是相當(dāng)大的一部分應(yīng)用場(chǎng)景，這時(shí)則需要通過(guò)手動(dòng)拼接或使用正則表達(dá)式從 Date 對(duì)象中提取不同的部分。例如：

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份加1，確保是兩位數(shù)
  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

以上是一個(gè)基礎(chǔ)版本的自定義格式化方法，我們可以再擴(kuò)展一下，讓它支持自定義的時(shí)間格式：

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小時(shí)制
      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 小時(shí)制
console.log(formatDate(new Date(), "yyyy-MM-dd a hh:mm:ss"));

本地化格式化

除了對(duì)日期自定義格式的格式化需求，針對(duì)大型的平臺(tái)型項(xiàng)目，就需要本地化格式化或者說(shuō)是國(guó)際化的日期格式化支持，新的 Intl.DateTimeFormat API 為我們國(guó)際化日期格式提供了標(biāo)準(zhǔn)接口。

Intl.DateTimeFormat

Intl.DateTimeFormat 是 JavaScript 語(yǔ)言內(nèi)置的國(guó)際化工具，允許我們以本地化方式格式化日期。

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

你可以通過(guò)修改選項(xiàng)來(lái)控制輸出格式，例如：

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

Intl.DateTimeFormat 的瀏覽器兼容性

Intl.DateTimeFormat 的瀏覽器支持情況還是比較理想的，如果你希望使用標(biāo)準(zhǔn)的日期國(guó)際化格式的解決方案，Intl.DateTimeFormat 目前是一個(gè)不錯(cuò)的選擇。

處理時(shí)區(qū)

除了處理個(gè)性化的日期格式，國(guó)際化的日期格式外，另外一個(gè)對(duì)于大型應(yīng)用需要處理的一個(gè)日期的問(wèn)題就是處理跨時(shí)區(qū)的日期數(shù)據(jù)。

原生 JavaScript 時(shí)區(qū)

JavaScript 原生的 Date 對(duì)象默認(rèn)會(huì)根據(jù)系統(tǒng)的時(shí)區(qū)顯示時(shí)間。如果需要轉(zhuǎn)換時(shí)區(qū)，可以使用 toLocaleString 方法：

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

使用 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); // 紐約當(dāng)前時(shí)間

使用 dayjs 時(shí)區(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); // 紐約當(dāng)前時(shí)間

使用第三方庫(kù)

除了自己親歷親為處理各種日期格式問(wèn)題外，使用第三方庫(kù)來(lái)處理日期格式問(wèn)題也是一個(gè)不錯(cuò)的選擇。下面將介紹一些主流的處理日期數(shù)據(jù)第三方庫(kù)。

Moment.js （不推薦用于新項(xiàng)目）

雖然 Moment.js 曾經(jīng)是處理日期的標(biāo)準(zhǔn)庫(kù)，但由于體積大、性能問(wèn)題，已經(jīng)不再推薦使用新項(xiàng)目。官方建議使用原生 API 或其他更輕量的庫(kù)。

// 安裝 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 是一個(gè)現(xiàn)代的、輕量級(jí)的日期處理庫(kù)，API 設(shè)計(jì)類似于 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 支持多種插件擴(kuò)展，例如時(shí)區(qū)、相對(duì)時(shí)間等。

date-fns

date-fns 是另一個(gè)流行的日期處理庫(kù)，功能強(qiáng)大且模塊化。你可以根據(jù)需要僅引入部分功能。

// 安裝 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 提供了許多實(shí)用函數(shù)，如格式化、比較、時(shí)間計(jì)算等，非常適合處理復(fù)雜的日期操作。

總結(jié)

對(duì)于日期格式化，原生的 JavaScript 方法適合處理簡(jiǎn)單的日期和時(shí)間格式化。利用 Date 對(duì)象結(jié)合手動(dòng)拼接字符串可以滿足大部分需求。Intl.DateTimeFormat 這個(gè) JavaScript 內(nèi)置的國(guó)際化日期格式化工具，適合需要處理本地化格式的場(chǎng)景。

而如 Day.js 和 date-fns 提供更強(qiáng)大的功能和簡(jiǎn)便的 API，適合處理復(fù)雜的日期操作和格式化需求。大家可以根據(jù)自己的實(shí)際應(yīng)用選擇合適的解決方案。

以上就是JavaScript日期格式化技巧分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript日期格式化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論