[JavaScript] JavaScript的時間與時區

0 序言

• 第1章節，原創，主要關注：JS的時間、時區國際化問題

• 第2章節，主要來自於第1篇參考文獻（系對第1章節的基礎知識的夯實）

1 JavaScript 時間、時區的國際化（案例）

本案例等同於問題：JavaScript從瀏覽器根據不同時區獲取時間的問題

假定現在有兩臺Windows筆記本電腦。

Step1 設置操作系統的時區

• 分別對兩臺筆記本電腦設置時區爲：北京時區、都柏林時區

• 操作路徑：控制面板-時鐘和區域-日期和時間-更改時區
• 一般業務系統的實現思路：

• 前端/瀏覽器請求API時提供當地的時間戳（startTimestamp / endTimestamp）；
• 前端/瀏覽器請求API後獲得返回的時間戳；
• 再利用JS獲取操作系統的時區，進行本地化時區展示

北京時區（不涉及夏令時）

都柏林時區（涉及夏令時）

Step2.1 測驗：new Date().getTime() | 結論：不同時區獲取的時間戳一致

如下2個時區的時間戳，是由兩個人在兩臺Windows筆記本電腦上人工進行的獲取，故毫秒上有一定輕微差距。

• 北京時區
  

1695031586299 => 2023-09-18 18:06:26 (UTC+8)

• 都柏林時區

1695031586234 => 2023-09-18 18:06:26 (UTC+8)

Step2.2 測驗：Date.parse(new Date("2023-09-18 00:00:00")) | 結論：不同時區獲取的時間(字符串)不一致

• 北京時區

1694966400000 => 2023-09-18 00:00:00 (北京時區)

• 都柏林時區

1694991600000 => 2023-09-18 07:00:00 (北京時區)

提一個思考題：爲何Step2.2中，北京時區(UTC+8)與都柏林時區(UTC+0)的時差不是8小時，而是7小時？

大家可自行思考，過兩天再解答。

2 JavaScript 時間 API

2.1 獲取時間戳(毫秒級/13位)

//方法1 
var timestamp = Date.parse(new Date());// 此方式獲取的時間戳只是把【毫秒部分】改成【000】顯示，因爲 new Date() 對象本身只精確到秒
// 1640569738000

//方法2
var timestamp=new Date().getTime()；
// 1640569787716

//方法3
var timestamp = (new Date()).valueOf() 
//1640569936666

2.2 獲取時間

var myDate = new Date();
myDate.getYear();  //獲取當前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth();  //獲取當前月份(0-11,0代表1月)
myDate.getDate();  //獲取當前日(1-31)
myDate.getDay();   //獲取當前星期X(0-6,0代表星期天)
myDate.getTime();  //獲取當前時間(從1970.1.1開始的毫秒數)
myDate.getHours();  //獲取當前小時數(0-23)
myDate.getMinutes();  //獲取當前分鐘數(0-59)
myDate.getSeconds();  //獲取當前秒數(0-59)
myDate.getMilliseconds(); //獲取當前毫秒數(0-999)
myDate.toLocaleDateString();  //獲取當前日期
var mytime=myDate.toLocaleTimeString();  //獲取當前時間
myDate.toLocaleString( );  //獲取日期與時間

// 獲取當前時間戳(以s爲單位)
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
//當前時間戳爲：1403149534
console.log("當前時間戳爲：" + timestamp);

// 獲取某個時間格式的時間戳
var stringTime = "2014-07-10 10:21:12";
var timestamp2 = Date.parse(new Date(stringTime));
timestamp2 = timestamp2 / 1000;
//2014-07-10 10:21:12的時間戳爲：1404958872 
console.log(stringTime + "的時間戳爲：" + timestamp2);

// 將當前時間換成時間格式字符串
var timestamp3 = 1403058804;
var newDate = new Date();
newDate.setTime(timestamp3 * 1000);
// Wed Jun 18 2014 
console.log(newDate.toDateString());
// Wed, 18 Jun 2014 02:33:24 GMT 
console.log(newDate.toGMTString());
// 2014-06-18T02:33:24.000Z
console.log(newDate.toISOString());
// 2014-06-18T02:33:24.000Z 
console.log(newDate.toJSON());
// 2014年6月18日 
console.log(newDate.toLocaleDateString());
// 2014年6月18日 上午10:33:24 
console.log(newDate.toLocaleString());
// 上午10:33:24 
console.log(newDate.toLocaleTimeString());
// Wed Jun 18 2014 10:33:24 GMT+0800 (中國標準時間)
console.log(newDate.toString());
// 10:33:24 GMT+0800 (中國標準時間) 
console.log(newDate.toTimeString());
// Wed, 18 Jun 2014 02:33:24 GMT
console.log(newDate.toUTCString());

2.3 【時間戳】轉化爲標準的【時間字符串】(YYYY-MM-DD hh:mm:ss)

function timestampToTime(timestamp) {
  var date = new Date(timestamp * 1000);//時間戳爲10位需*1000，時間戳爲13位的話不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
  var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
  var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
  var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
  var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
  return Y+M+D+h+m+s;
}

timestampToTime(1403058804);
console.log(timestampToTime(1403058804));//2020-06-18 10:33:24

2.4 封裝的時間格式器

/** 
 * 時間戳格式化函數 
 * @param {string} format 格式 
 * @param {int} timestamp 要格式化的時間 默認爲當前時間 
 * @return {string}   格式化的時間字符串 
 */
function date(format, timestamp){ 
 var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date()); 
 var pad = function(n, c){ 
  if((n = n + "").length < c){ 
   return new Array(++c - n.length).join("0") + n; 
  } else { 
   return n; 
  } 
 }; 
 var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 
 var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"}; 
 var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 var f = { 
  // Day 
  d: function(){return pad(f.j(), 2)}, 
  D: function(){return f.l().substr(0,3)}, 
  j: function(){return jsdate.getDate()}, 
  l: function(){return txt_weekdays[f.w()]}, 
  N: function(){return f.w() + 1}, 
  S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'}, 
  w: function(){return jsdate.getDay()}, 
  z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0}, 
   
  // Week 
  W: function(){ 
   var a = f.z(), b = 364 + f.L() - a; 
   var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1; 
   if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){ 
    return 1; 
   } else{ 
    if(a <= 2 && nd >= 4 && a >= (6 - nd)){ 
     nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31"); 
     return date("W", Math.round(nd2.getTime()/1000)); 
    } else{ 
     return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0); 
    } 
   } 
  }, 
   
  // Month 
  F: function(){return txt_months[f.n()]}, 
  m: function(){return pad(f.n(), 2)}, 
  M: function(){return f.F().substr(0,3)}, 
  n: function(){return jsdate.getMonth() + 1}, 
  t: function(){ 
   var n; 
   if( (n = jsdate.getMonth() + 1) == 2 ){ 
    return 28 + f.L(); 
   } else{ 
    if( n & 1 && n < 8 || !(n & 1) && n > 7 ){ 
     return 31; 
    } else{ 
     return 30; 
    } 
   } 
  }, 
   
  // Year 
  L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0}, 
  //o not supported yet 
  Y: function(){return jsdate.getFullYear()}, 
  y: function(){return (jsdate.getFullYear() + "").slice(2)}, 
   
  // Time 
  a: function(){return jsdate.getHours() > 11 ? "pm" : "am"}, 
  A: function(){return f.a().toUpperCase()}, 
  B: function(){ 
   // peter paul koch: 
   var off = (jsdate.getTimezoneOffset() + 60)*60; 
   var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off; 
   var beat = Math.floor(theSeconds/86.4); 
   if (beat > 1000) beat -= 1000; 
   if (beat < 0) beat += 1000; 
   if ((String(beat)).length == 1) beat = "00"+beat; 
   if ((String(beat)).length == 2) beat = "0"+beat; 
   return beat; 
  }, 
  g: function(){return jsdate.getHours() % 12 || 12}, 
  G: function(){return jsdate.getHours()}, 
  h: function(){return pad(f.g(), 2)}, 
  H: function(){return pad(jsdate.getHours(), 2)}, 
  i: function(){return pad(jsdate.getMinutes(), 2)}, 
  s: function(){return pad(jsdate.getSeconds(), 2)}, 
  //u not supported yet 
   
  // Timezone 
  //e not supported yet 
  //I not supported yet 
  O: function(){ 
   var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4); 
   if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t; 
   return t; 
  }, 
  P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))}, 
  //T not supported yet 
  //Z not supported yet 
   
  // Full Date/Time 
  c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()}, 
  //r not supported yet 
  U: function(){return Math.round(jsdate.getTime()/1000)} 
 }; 
   
 return format.replace(/[\]?([a-zA-Z])/g, function(t, s){ 
  if( t!=s ){ 
   // escaped 
   ret = s; 
  } else if( f[s] ){ 
   // a date function exists 
   ret = f[s](); 
  } else{ 
   // nothing special 
   ret = s; 
  } 
  return ret; 
 }); 
}

X 參考文獻

• JS獲取當前時間的方法 - Zhihu