摘要:下面實現(xiàn)日期格式的解析,要把傳入的日期格式做匹配,然后從對象解析出對應(yīng)的值,再拼到一塊。
最近在翻看原來寫的工具函數(shù)中,發(fā)現(xiàn)了formatDate這個工具函數(shù),原來只是在使用,具體的實現(xiàn)原理沒有仔細(xì)研究過,這次就來分析一下它的實現(xiàn),了解一下正則表達(dá)式的一個實戰(zhàn)應(yīng)用。
函數(shù)功能formatDate 函數(shù)接受兩個參數(shù),日期對象和格式參數(shù),可以根據(jù)不同的格式參數(shù)將事件對象轉(zhuǎn)換成日期格式,大致使用如下
formatDate(new Date(), "yy-mm-dd") // 18-05-13 formatDate(new Date(), "yyyy-MM-dd hh:mm") // "2018-05-13 16:35"
當(dāng)然也可以把函數(shù)掛載在prototype上面,這樣就只需要一個參數(shù)了,這個后續(xù)再說。
實現(xiàn)思路實現(xiàn)思路比較簡單,就是利用,Date提供的函數(shù),比如getMonth,getFullYear等函數(shù)先把Date對象拆解出必要的部分。年月日小時分鐘秒等,然后再根據(jù)傳入的參數(shù)進(jìn)行組合,得到想要的效果。這里有幾個處理過程中需要注意的地方。
對于1位的數(shù)字應(yīng)該可以支持選擇補0也可以不補0
formatDate(new Date(), "yyyy-M-dd") // "2018-5-13" formatDate(new Date(), "yyyy-MM-dd") // "2018-05-13"
對于月份因為是從0開始計數(shù)的,所以要+1月,不是加1s啊
支持參數(shù)的各種組合
實現(xiàn)過程因為需要支持各種組合,所以需要一個對象將個部分存儲下來,根據(jù)參數(shù)的格式能夠快速的解析出來對應(yīng)的值。對象的格式大致如下
var cfg = { yyyy: date.getFullYear(), // 年 : 4位 yy: date.getFullYear().toString().substring(2), // 年 : 2位 M: date.getMonth() + 1, // 月 : 如果1位的時候不補0 MM: paddNum(date.getMonth() + 1), // 月 : 如果1位的時候補0 d: date.getDate(), // 日 : 如果1位的時候不補0 dd: paddNum(date.getDate()), // 日 : 如果1位的時候補0 hh: paddNum(date.getHours()), // 時 mm: paddNum(date.getMinutes()), // 分 ss: paddNum(date.getSeconds()) // 秒 }
雙位補0單位不補0,補0的過程封裝成一個函數(shù)paddNum,自然想到的是用正則表達(dá)式來判斷是否是1位,很容易寫出如下代碼
let paddNum = num => { if (/^d$/.test(num)) { return "0" + num } return num }
不過還可以使用字符串提供的正則表達(dá)式replace功能簡化這個過程,使用捕獲組來獲取匹配的值,再+0,如果沒有匹配,就返回本身,這也正是我們想要的,這里提前需要把數(shù)字轉(zhuǎn)換成字符串。
let paddNum = num => num.toString().replace(/^(d)$/, "0$1")
這樣每個日期的數(shù)據(jù)處理部分就做完了。
下面實現(xiàn)日期格式的解析,要把傳入的日期格式做匹配,然后從對象解析出對應(yīng)的值,再拼到一塊。
分析傳入日期的格式,都是yyyy,dd這種重疊的格式,這就需要針對每一個匹配出來的值,都要匹配到與其相同的一組值,也就是如果匹配到y,那就要把緊跟在y后面所有的y都匹配出來,比如yy,yyyy等,直到遇到首個不是y的字符停止。這就需要在匹配環(huán)節(jié)記住匹配的部分并重復(fù)匹配,捕獲組又派上了用場。 /([a-z])(1)*/,1可以代替匹配到的字符,進(jìn)而組成新的匹配條件,這樣的匹配條件就是那種想要的重疊格式了。
所以解析的過程如下
format.replace(/([a-z])(1)*/ig, m => cfg[m])整合
稍作整理,這個工具函數(shù)就組合起來了
const formatDate = (date=new Date(), format="yyyy-MM-dd hh:mm:ss") => { // 單位補0 let paddNum = num => num.toString().replace(/^(d)$/, "0$1") // 指定格式字符 var cfg = { yyyy: date.getFullYear(), // 年 : 4位 yy: date.getFullYear().toString().substring(2), // 年 : 2位 M: date.getMonth() + 1, // 月 : 如果1位的時候不補0 MM: paddNum(date.getMonth() + 1), // 月 : 如果1位的時候補0 d: date.getDate(), // 日 : 如果1位的時候不補0 dd: paddNum(date.getDate()), // 日 : 如果1位的時候補0 h: date.getHours(), // 時 hh: paddNum(date.getHours()), // 時 mm: paddNum(date.getMinutes()), // 分 ss: paddNum(date.getSeconds()) // 秒 } return format.replace(/([a-z])(1)*/ig, m => cfg[m]) }
可以看出用好正則表達(dá)式的捕獲組,可以大大簡化代碼量,邏輯看上去也很清楚。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94933.html
摘要:簡言在表單驗證中,經(jīng)常會用正則表達(dá)式做出生日期校驗。聲明本文目的是為了闡述如何編寫一個正則表達(dá)式的過程。綜上所述,正則表達(dá)式是強大的,但并不是萬能的,因此不要過份地依賴和濫用正則。 簡言 在表單驗證中,經(jīng)常會用正則表達(dá)式做出生日期校驗。本文把出生日期分割成幾個部分,分步地介紹了實現(xiàn)一個出生日期校驗的完整過程。相信您在理解了本篇的內(nèi)容后,對如何編寫和如何應(yīng)用正則表達(dá)式會有進(jìn)一步的理解和體...
摘要:如將構(gòu)造函數(shù)作為函數(shù)進(jìn)行調(diào)用即不包括的方式,返回的是日期的字符串表示,而非日期對象。如果不注意這一點,沒有始終使用日期構(gòu)造函數(shù),將得到一堆混亂的日期對象和日期的字符串。關(guān)于日期類的完整解釋,以及構(gòu)造函數(shù)的參數(shù)格式,參見規(guī)范節(jié)。 上一篇文章:MongoDB指南---2、MongoDB基礎(chǔ)知識-文檔、集合、數(shù)據(jù)庫、客戶端下一篇文章:MongoDB指南---4、MongoDB基礎(chǔ)知識-使用M...
摘要:如將構(gòu)造函數(shù)作為函數(shù)進(jìn)行調(diào)用即不包括的方式,返回的是日期的字符串表示,而非日期對象。如果不注意這一點,沒有始終使用日期構(gòu)造函數(shù),將得到一堆混亂的日期對象和日期的字符串。關(guān)于日期類的完整解釋,以及構(gòu)造函數(shù)的參數(shù)格式,參見規(guī)范節(jié)。 上一篇文章:MongoDB指南---2、MongoDB基礎(chǔ)知識-文檔、集合、數(shù)據(jù)庫、客戶端下一篇文章:MongoDB指南---4、MongoDB基礎(chǔ)知識-使用M...
摘要:本文接上篇,基礎(chǔ)部分相對薄弱的同學(xué)請移步正則表達(dá)式學(xué)習(xí)筆記一理論基礎(chǔ)。正則表達(dá)式標(biāo)志符全局匹配,即找到所有匹配的。方法返回結(jié)果的格式不一致問題這個問題上文正則表達(dá)式學(xué)習(xí)筆記一理論基礎(chǔ)也有體現(xiàn),這里再單獨拿來說一說,以加深記憶。 showImg(https://segmentfault.com/img/remote/1460000014261596?w=600&h=338); 本文接上篇...
摘要:使用構(gòu)造器時,需要將模式書寫成普通的字符串,因此反斜杠的使用規(guī)則與往常相同。構(gòu)造器的后四個參數(shù)小時分鐘秒毫秒是可選的,如果用戶沒有指定這些參數(shù),則參數(shù)的值默認(rèn)為。 來源:ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文:Regular Expressions 譯者:飛龍 協(xié)議:CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript...
閱讀 1724·2021-11-11 10:58
閱讀 4210·2021-09-09 09:33
閱讀 1266·2021-08-18 10:23
閱讀 1554·2019-08-30 15:52
閱讀 1632·2019-08-30 11:06
閱讀 1877·2019-08-29 14:03
閱讀 1513·2019-08-26 14:06
閱讀 2959·2019-08-26 10:39