Application of string in JavaScript format

After some design, this function is finally completed. After this js is introduced, you can configure the format string to output various custom date formats.

Flowchart

We can see that the so-called Format String is actually a string containing specific characters, and then replace it with the specified value according to its actual meaning.
In this article, only the Date object is used as an example. In fact, the value of the format string is not only this. In what scenarios can a format string be used? I hope you can find the answer at the end of this article.
Algorithm Introduction
Below I will use an example to illustrate the algorithm of the format string. In this example, the "day" part of the date will be formatted, for example,. If the format string is "d", "8" will be output; if the format string is "dd ", "08" is output. If the format string is "dddd", "5" is output. If the format string is "dddd", "Friday" is output ". The parameter d is a Date object, and the format is a string:Copy codeThe Code is as follows: // format the day
Function FormatDay (d, format ){
While (format. indexOf ("d")>-1 ){
Var regex =/[d] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getDate ();
Case 2:
Return d. getDate () <10? "0" + d. getDate (): d. getDate ();
Case 3:
Switch (d. getDay ()){
Case 0:
Return "day ";
Case 1:
Return "1 ";
Case 2:
Return "2 ";
Case 3:
Return "3 ";
Case 4:
Return "4 ";
Case 5:
Return "5 ";
Case 6:
Return "6 ";
}
Default:
Switch (d. getDay ()){
Case 0:
Return "Sunday ";
Case 1:
Return "Monday ";
Case 2:
Return "Tuesday ";
Case 3:
Return "Wednesday ";
Case 4:
Return "Thursday ";
Case 5:
Return "Friday ";
Case 6:
Return "Saturday ";
}
}
});
}
Return format;
}

We can see that the core part is:Copy codeThe Code is as follows: while (format. indexOf ("d")>-1 ){
Var regex =/[d] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
// Todo
Case 2:
// Todo
Case 3:
// Todo
Case x:
// Todo
Default:
// Todo
}
});
}

Explanation:
1. Use the while LOOP, as long as the format string contains specific characters, it will continue to be executed;
2. Declare a regular expression object/[x] +/, where x represents a specific character;
3. Use the replace method of the string object to replace specific characters;
4. Perform different operations based on the length of the matched string (in this example, "d", "dd", and "ddd" indicate different meanings ).
Format String description
Take 508-1-9 as an Example

Format String	Description	Example
Y	Format the year. The year is composed of centuries + years.	"Y" Output 8 "Yy" output 08 "Yyy" output 508 "Yyyy" output 0508 "Yyyyyy" output 000508
M	Format the month.	"M" output 1 "MM" output 01 "MMM" or more output in May January
D	Format the day.	"D" Output 9 "Dd" output 09 "Ddd" output 1 "Dddd" or more output Monday
H, h	Format the hour. H indicates the 24-hour system, and h indicates the 12-hour system.	"H" output 14 "HH" or more output 14 "H" Output 2 "Hh" or more outputs 02
M	Format in minutes.	"M" output 3 "Mm" or more outputs 03
S	Formatting seconds	"S" output 5 "Ss" or more outputs 05

For more settings, you can do it yourself.

Example
After referencing this js, the test results in the browser console are as follows:

How do you feel ......

By the way, the calling method on the console of Each browser is as follows:

Browser	Shortcut Key
Chrome	Ctrl + Shift + J
IE8	F12
FireFox	Forgot. The console in FireFox is not native, but a plug-in called FireBug.

Source code
The following code can be downloaded in DateExtension. js:Copy codeThe Code is as follows: Date. prototype. ToString = function (format ){
If (typeof (format) = "string "){
Return FormatDateTime (this, format );
}
Return FormatDateTime (this, "yyyy-MM-dd HH: mm: ss ");
}
// Format the DateTime object
Function FormatDateTime (d, format ){
Format = FormatYear (d, format );
Format = FormatMonth (d, format );
Format = FormatDay (d, format );
Format = FormatHour (d, format );
Format = FormatMinute (d, format );
Format = FormatSecond (d, format );
Return format;
}
// Format the year
Function FormatYear (d, format ){
Var fullYear = d. getFullYear (); // The complete year.
Var century = Math. floor (fullYear/100); // century
Var year = fullYear % 100; // age
While (format. indexOf ("y")>-1 ){
Var regex =/[y] + /;
Format = format. replace (regex, function (w ){
// If the format string is "y" or "yy", only the time is returned. Otherwise, it will return to the century + age.
Switch (w. length ){
Case 0: break;
Case 1:
Return year;
Case 2:
Return year <10? "0" + year: year;
Default:
Var yearPart = year <10? "0" + year: year;
Var centuryPart = "";
For (var I = 0; I <w. length-2-century. toString (). length; I ++ ){
CenturyPart + = "0 ";
}
CenturyPart + = century;
Return centuryPart + yearPart;
}
});
}
Return format;
}
// Format the month
Function FormatMonth (d, format ){
Var month = d. getMonth () + 1;
While (format. indexOf ("M")>-1 ){
Var regex =/[M] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return month;
Case 2:
Return month <10? "0" + month: month;
Default:
Switch (month ){
Case 1:
Return "January ";
Case 2:
Return "February ";
Case 3:
Return "March ";
Case 4:
Return "April ";
Case 5:
Return "May ";
Case 6:
Return "June ";
Case 7:
Return "July ";
Case 8:
Return "August ";
Case 9:
Return "September ";
Case 10:
Return "October ";
Case 11:
Return "November ";
Case 12:
Return "December ";
}
}
});
}
Return format;
}
// Format the day
Function FormatDay (d, format ){
While (format. indexOf ("d")>-1 ){
Var regex =/[d] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getDate ();
Case 2:
Return d. getDate () <10? "0" + d. getDate (): d. getDate ();
Case 3:
Switch (d. getDay ()){
Case 0:
Return "day ";
Case 1:
Return "1 ";
Case 2:
Return "2 ";
Case 3:
Return "3 ";
Case 4:
Return "4 ";
Case 5:
Return "5 ";
Case 6:
Return "6 ";
}
Default:
Switch (d. getDay ()){
Case 0:
Return "Sunday ";
Case 1:
Return "Monday ";
Case 2:
Return "Tuesday ";
Case 3:
Return "Wednesday ";
Case 4:
Return "Thursday ";
Case 5:
Return "Friday ";
Case 6:
Return "Saturday ";
}
}
});
}
Return format;
}
// Format the hour
// H: 24-hour format
// H: 12-hour format
Function FormatHour (d, format ){
While (format. indexOf ("H")>-1 ){
Var regex =/[H] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getHours ();
Default:
Return d. getHours () <10? "0" + d. getHours (): d. getHours ();
}
});
}
While (format. indexOf ("h")>-1 ){
Var regex =/[h] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getHours ()> 12? D. getHours ()-12: d. getHours ();
Default:
Var t = d. getHours ()> 12? D. getHours ()-12: d. getHours ();
Return t <10? "0" + t: t;
}
});
}
Return format;
}
// Formatted for minutes
Function FormatMinute (d, format ){
While (format. indexOf ("m")>-1 ){
Var regex =/[m] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getMinutes ();
Default:
Return d. getMinutes () <10? "0" + d. getMinutes (): d. getMinutes ();
}
});
}
Return format;
}
// Formatting seconds
Function FormatSecond (d, format ){
While (format. indexOf ("s")>-1 ){
Var regex =/[s] + /;
Format = format. replace (regex, function (w ){
Switch (w. length ){
Case 0: break;
Case 1:
Return d. getSeconds ();
Default:
Return d. getSeconds () <10? "0" + d. getSeconds (): d. getSeconds ();
}
});
}
Return format;
}

Resources used in this article
Download DateExtension. js
W3C School
More support for viewing Date objects
Date operation DateTime Function Code implemented by js

Pdf