JavaScript 형식의 string_javascript 기술 적용

몇 가지 설계를 거쳐 이 기능이 마침내 완성되었습니다. 이 js를 도입한 후에는 형식 문자열을 직접 구성하여 다양한 사용자 정의 날짜 형식을 출력할 수 있습니다.

흐름도

소위 형식 문자열은 실제로는 특정 문자를 포함하는 문자열이며, 그 실제 내용을 기반으로 한다는 것을 알 수 있습니다. 의미는 지정된 값으로 대체됩니다.
이 글에서는 Date 객체만 예시로 사용합니다. 실제로 형식 문자열의 값은 이보다 더 뛰어납니다. 어떤 상황에서 형식 문자열을 사용할 수 있나요? 이 글을 끝까지 읽으시면 답을 찾으실 수 있기를 바랍니다.
알고리즘 소개
아래에서는 형식 문자열 알고리즘을 설명하기 위해 예를 사용하겠습니다. 이 예에서는 날짜의 "일" 부분을 형식화합니다(예: 2008-8-8). 형식 문자열이 "d"이면 "8"이 출력되고, 형식 문자열이 "dd"이면 " 08"; 형식 문자열이 "dddd"이면 "five"가 출력되고, 형식 문자열이 "dddd"이면 "friday"가 출력됩니다. 매개변수 d는 날짜 객체이고 형식은 문자열입니다.

코드 복사 코드는 다음과 같습니다.

//Format 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();
사례 2:
return d.getDate() < 10 ? "0" d.getDate() : d.getDate()
사례 3:
switch(d.getDay() ) {
case 0:
return "日";
case 1:
return "一";
case 2:
return "two";
return "三";
case 4:
return "4";
case 5:
return "五";
return "六";
}
기본값:
switch(d.getDay()){
case 0:
return "Sunday";
case 1:
return "Monday"; 🎜>사례 2:
"화요일" 반환;
사례 3:
"수요일" 반환;
사례 4:
"목요일" 반환:
return "금요일";
return "Saturday";
}
})
}


보시다시피 핵심 부분은




코드 복사

코드는 다음과 같습니다.

while (format.indexOf("d") > -1) { var regex = /[d] / format = format.replace(regex, function(w) ) { 스위치(w.length) { 케이스 0: 중단 케이스 1:

//todo

케이스 2:
//todo
케이스 3:
/ /todo
case x:
//todo
기본값:
//todo
}
})
}


解释：
1. 使用while循环，只要格式字符串format中含有特定字符就一直执行下去；
2. 声明一个正则表达式对象/[x]+/，其中x表示特定字符；
3. 使用string对象的replace方法替换特定字符；
4. 根据匹配到的特定字符串的长度，执行不同的操作（在本示例中，“d”、“dd”、“ddd”代表不同的含义）。
格式字符串说明
以508-1-9 14:3:5为例

格式字符串	描述	示例
y	格式化年。年份由世纪+年代组成。	“y”输出8 “yy”输出08 “yyy”输出508 “yyyy”输出0508 “yyyyyy”输出000508
M	格式化月。	“M”输出1 “MM”输出01 “MMM”或更多输出一月
d	格式化日。	“d”输出9 “dd” 输出09 “ddd” 输出一 “dddd” 或更多输出星期一
H,h	格式化小时。其中H表示24小时制，h表示12小时制。	“H”输出14 “HH” 或更多输出14 “h”输出2 “hh” 或更多输出02
m	格式化分钟。	“m”输出3 “mm” 或更多输出03
s	格式化秒	“s”输出5 “ss” 或更多输出05

更多的设置，大家可以自己动手做一下。

示例
引用此js后，在浏览器的控制台中测试结果如下：

如何，有没有心动的感觉……

顺便说一下各浏览器的控制台呼出方式：

浏览器	快捷键
Chrome	Ctrl + Shift + J
IE8	F12
FireFox	忘了。FireFox中的控制台不是原生的，是一个叫FireBug的插件。

소스 코드
다음 코드는 DateExtension.js에서 다운로드할 수 있습니다

코드 복사 코드는 다음과 같습니다. :

Date.prototype.ToString = function(format){
if(typeof(format) == "string"){
return FormatDateTime(this, format); >}
return FormatDateTime(this, "yyyy-MM-dd HH:mm:ss");
}
//Format DateTime 객체
function FormatDateTime(d, format){
format = FormatYear(d, 형식);
format = FormatMonth(d, 형식);
format = FormatHour(d, 형식); FormatMinute(d, format);
format = FormatSecond(d, format);
return format;
}
//형식 연도
function FormatYear(d, format){
var fullYear = d.getFullYear(); //연도
var Century = Math.floor(fullYear / 100); //세기
var year = fullYear % 100; .indexOf ("y") > -1){
var regex = /[y] /
format = format.replace(regex,function(w){
//형식 지정 문자열 "y" 또는 "yy"이면 연도만 반환됩니다. 그렇지 않으면 세기 연도가 반환됩니다.
switch(w.length){
case 0:break
case 1:
return year;
return year < 10 ? "0" 연도:
var yearPart = 연도 <10 ? >var CenturyPart = "";
for(var i = 0; i < w.length - 2 - Century.toString().length; i ){
centuryPart = "0";
centuryPart = Century;
centuryPart yearPart
}
})
}
반환 형식;
//월 형식 지정
함수 (d, 형식){
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:
반환 월;
case 2:
월 기본값:
전환(월){
케이스 1:
"1월" 반환
:
"2월"을 반환합니다.
사례 3:
"3월"을 반환합니다.
사례 4:
"4월"을 반환합니다.
사례 5:
"5월"을 반환합니다. ;
케이스 6:
"6월" 반환;
케이스 7:
"7월" 반환
케이스 8:
"8월" 반환:
return "9월";
case 10:
return "10월";
case 11:
return "11월";
return
}
}
});
}
return format;
}
//Format day
function FormatDay(d , format){
while( format.indexOf("d") > -1){
var regex = /[d] /
format = format.replace(regex,function(w) {
switch(w.length) ){
케이스 0:break;
케이스 1:
return d.getDate()
케이스 2:
return d.getDate() < getDate() : d.getDate();
케이스 3:
switch(d.getDay()){
케이스 0:
"Day" 반환
케이스 1:
return "一";
case 2:
return "two";
case 3:
return "三";
case 4:
return "4"; >case 5:
return "五";
case 6:
return "六";
}
기본값:
switch(d .getDay()){
사례 0:
return "Sunday";
case 1:
return "Monday";
case 2:
return "Tuesday";
return " 수요일";
사례 4:
"목요일" 반환;
사례 5:
"금요일" 반환;
사례 6:
"토요일" 반환;
}
}
});
}
반환 형식;
}
//시간 형식
//H: 24시간 시스템
//h: 12시간 format
function FormatHour(d, format){
while(format.indexOf("H") > -1){
var regex = /[H ]
format = format. replacement(regex,function(w){
switch(w.length){
case 0:break;
case 1:
return d.getHours ();
기본값:
return d.getHours() < 10 ? "0" d.getHours() :
}
})
}
while(format.indexOf(") h") > -1){
var regex = /[h] /;
format = format.replace(regex,function(w){
스위치(w.length){
사례 0:break;
사례 1:
return d.getHours() > 12 : d.getHours()
var t = d .getHours() > 12 ? d.getHours()
t < "0" t : t; >}
return 형식;
}
//분 형식 지정
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();
return d.getMinutes() < ? "0" d.getMinutes() : d .getMinutes()
});
return format;
}
//초 형식 지정
function FormatSecond(d, format){
while(format.indexOf("s") > ; -1){
var regex = /[s] /;
format = format.replace(regex,function(w){
switch( w.length){
case 0:break ;
경우 1:
return d.getSeconds();
기본값:
return d.getSeconds() < "0" d.getSeconds() : d.getSeconds();
}
})
}
반품 형식
}


이 기사에 사용된 리소스
DateExtension.js 다운로드
W3C School 브라우징
Date 객체에 대한 추가 지원 찾아보기
js로 구현된 날짜 작업 클래스 DateTime 함수 코드

PDF버전 다운로드 주소