首頁  >  文章  >  web前端  >  關於JavaScript 的 Date 最詳細解讀

關於JavaScript 的 Date 最詳細解讀

黄舟
黄舟原創
2017-03-07 15:01:08967瀏覽

基礎的 Date() 就不說了~ :  )

如何取得某個月的天數?

不知道大家有遇到這個問題嗎?我想如果你們寫過日期組件一定有這個問題,我當時的解決方案是這樣的:

以下的三個方法,month 參數我都根據JS 本身對於Date 的月份定義,採用0為1月

最老實的辦法

const EVERY_MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function getDays(year, month) {
  if (month === 1 && isLeap(year)) return 29;
  return EVERY_MONTH_DAYS[month];
}

#手動做了每個月天數的映射,如果是2月份並閏年,那天數+1

隨便安麗一個自己寫的osx 上的行事曆外掛 http://www.php.cn/

那沒有更好的方法呢?手動 map 和閏年判斷的邏輯沒有就好了。

稍微diao 一點的辦法

function getDays(year, month) {
  if (month === 1) return new Date(year, month, 29).getMonth() === 1 ? 29 : 28;
  return new Date(year, month, 31).getMonth() === month ? 31 : 30;
}

#我們發現,new Date()的第三個參數是可以大於我們所知的每個月的最後一天的,例如:

new Date(2016, 0, 200) //Mon Jul 18 2016 00:00:00 GMT+0800 (CST)

這樣,我們就利用這個JS 的特性,用29和31這兩個關鍵點,去判斷除了那個月的最後一天+1還是那個月嗎? (其實28和30是關鍵點)。

再稍微diao 一點的方法

function getDays(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

#new Date()的第三個參數傳小於1的數值會怎麼樣了,例如傳0,我們就獲得了上個月的最後一天,當然傳負數也沒問題:

new Date(2016, 0, -200) //Sun Jun 14 2015 00:00:00 GMT+0800 (CST)

##Date.prototype .各種String

具體的文件解釋懶得再複製一下給大家看,參考連結:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

這裡主要和大家普及以下知識:

GMT(格林尼治平時)

格林尼治平時(又稱格林尼治平均時間或格林尼治標準時間,舊譯格林威治標準時間;英語:Greenwich Mean Time,GMT)是指位於英國倫敦郊區的皇家格林尼治天文台的標準時間,因為本初子午線被定義在通過那裡的經線。

自1924年2月5日開始,格林尼治天文台每隔一小時就會向全世界發放調時訊息。

理論上來說,格林尼治標準時間的正午是指當太陽橫穿格林尼治子午線時(也就是在格林尼治上空最高點時)的時間。由於地球在它的橢圓軌道裡的移動速度不均勻,這個時刻可能與實際的太陽時有誤差,最大誤差達16分鐘。

由於地球每天的自轉是有些不規則的,而且正在緩慢減速,因此格林尼治時間已經不再被用作標準時間。現在的標準時間,是由原子鐘報時的協調世界時(UTC)。

所以我們也從MDN 上的文檔看到對於

toGMTString()的解釋是:

Returns a string representing the Date based on the GMT ( UT) time zone. Use toUTCString() instead.

UTC(世界標準時間)

#協調世界時,又稱世界標準時間或世界協調時間,簡稱UTC(從英文「Coordinated Universal Time」/法文「Temps Universel Cordonné」而來),是最主要的世界時間標準,其以原子時秒長為基礎,在時刻上盡量接近於格林尼治平時

CST(北京時間)

北京時間,China Standard Time,中國標準時間。在時區劃分上,屬東八區,比協調世界時早8小時,記為UTC+8。

不過這個CST這個縮寫比較糾結的是它可以同時代表四個不同的時間:

  • Central Standard Time (USA) UT-6:00

  • Central Standard Time (Australia) UT+9:30

  • China Standard Time UT+8:00

  • #Cuba Standard Time UT-4:00

插一個中國地區JS 客戶端時間和服務端時間不一致的問題

總結就是,前後端去傳時間的時候,盡量都用UTC 時間。

ISO 日期和時間的表示方法

if ( !Date.prototype.toISOString ) {
  ( function() {

    function pad(number) {
      if ( number < 10 ) {
        return &#39;0&#39; + number;
      }
      return number;
    }

    Date.prototype.toISOString = function() {
      return this.getUTCFullYear() +
        &#39;-&#39; + pad( this.getUTCMonth() + 1 ) +
        &#39;-&#39; + pad( this.getUTCDate() ) +
        &#39;T&#39; + pad( this.getUTCHours() ) +
        &#39;:&#39; + pad( this.getUTCMinutes() ) +
        &#39;:&#39; + pad( this.getUTCSeconds() ) +
        &#39;.&#39; + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
        &#39;Z&#39;;
    };

  }() );
}

#透過Polyfill 我們就能知道ISO 是怎麼表示時間的,最主要的特徵是最後一位是“Z”,然後表示的總是UTC 時間。

額外的補充

.valueOf() 和.getTime()

.valueOf()的功能和.getTime() 一樣。

該方法通常在 JavaScript 內部被調用,而不是在程式碼中明確調用。什麼意思?沒有 

valueOf,那麼Date的實例是不能進行運算的。

var obj = Object.create(null);
obj + 1; // Uncaught TypeError: Cannot convert object to primitive value(…)

.toJSON

#直接看這個API 的名字的時候,我以為會回傳一個JSON 格式的字串,但其實是這麼一個東西

new Date().toJSON() // "2016-05-05T06:03:28.130Z"

其實是這麼回事

JSON.stringify(new Date()) // ""2016-05-05T06:06:02.615Z""

那結果能夠被parse 嗎?

JSON.parse(JSON.stringify(new Date())) // "2016-05-05T06:19:24.766Z"
JSON.parse(&#39;"&#39; + new Date().toJSON() + &#39;"&#39;) // "2016-05-05T06:19:24.766Z"

但是結果只是字串而已。需要再講這個字串交給 

new Date() 才行。

.toLocaleFormat()

不屬於任何標準。在JavaScript 1.6中被實作。似乎也只有Firefox 自持這個API,其實正確姿勢是用

.toLocaleDateString()

.toLocale各種String()

##.toLcale各種String (locales [, options]])

<p>妈的这个 API 有点烦,看 MDN 的文档你就知道。这个 API 是用来本地化时间的。</p> <p>这里稍微说下我对这些参数的理解:</p> <h4><code>locales

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// formats below assume the local time zone of the locale;
// America/Los_Angeles for the US

// US English uses month-day-year order
alert(date.toLocaleString("en-US"));
// → "12/19/2012, 7:00:00 PM"

// British English uses day-month-year order
alert(date.toLocaleString("en-GB"));
// → "20/12/2012 03:00:00"

// Korean uses year-month-day order
alert(date.toLocaleString("ko-KR"));
// → "2012. 12. 20. 오후 12:00:00"

// Arabic in most Arabic speaking countries uses real Arabic digits
alert(date.toLocaleString("ar-EG"));
// → "٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص"

// for Japanese, applications may want to use the Japanese calendar,
// where 2012 was the year 24 of the Heisei era
alert(date.toLocaleString("ja-JP-u-ca-japanese"));
// → "24/12/20 12:00:00"

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
alert(date.toLocaleString(["ban", "id"]));
// → "20/12/2012 11.00.00"

locales所指的地区的时区和语言输出。

options

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

  • localeMatcher 选择本地匹配的什么算法,似乎没什么大用

  • timeZone 再设置下 UTC 时区

  • hour12 是否12小时制

  • formatMatcher 各日期时间单元的格式化

    • weekday Possible values are "narrow", "short", "long".

    • era Possible values are "narrow", "short", "long".

    • year Possible values are "numeric", "2-digit".

    • month Possible values are "numeric", "2-digit", "narrow", "short", "long".

    • day Possible values are "numeric", "2-digit".

    • hour Possible values are "numeric", "2-digit".

    • minute Possible values are "numeric", "2-digit".

    • second Possible values are "numeric", "2-digit".

    • timeZoneName Possible values are "short", "long".

栗子:

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

date.toLocaleString("en-US", {hour12: false}); // "12/19/2012, 19:00:00"

var options = {timeZoneName:&#39;long&#39;,weekday: "long", year: "2-digit", month: "narrow", day: "numeric"};
date.toLocaleString("en-US", options); // "Thursday, D 20, 12, China Standard Time"

插一个JavaScript 显示 Y-m-d H:i:s 的日期时间格式

老实的方法

let date = new Date();
let result = [
  [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate()
  ].join(&#39;-&#39;),
  [
    date.getHours(),
    date.getMinutes(),
    date.getSeconds()
  ].join(&#39;:&#39;)
].join(&#39; &#39;).replace(/\b\d\b/g, &#39;0$&&#39;);

diao 一点的方法

var date = new Date();
var result = date.toLocaleString(&#39;zh-CN&#39;, { hour12: false })
  .replace(/\//g, &#39;-&#39;).replace(/\b\d\b/g, &#39;0$&&#39;);

一些有用的时间库

  • https://github.com/moment/moment

  • https://github.com/rmm5t/jquery-timeago

 以上就是关于JavaScript 的 Date 最详细解读的内容,更多相关内容请关注PHP中文网(www.php.cn)!



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn