關於JavaScript 的 Date 最詳細解讀-js教程-PHP中文網

首頁

web前端

js教程

關於JavaScript 的 Date 最詳細解讀

黄舟

Mar 07, 2017 pm 03:01 PM

基礎的 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 id="code-locales-code"><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;);