JavaScript 형식 문자열 의 응용

한 차례 의 설 계 를 거 쳐 마침내 이 기능 을 완성 하 였 다.이 js 를 도입 하면 사용자 정의 날짜 형식 을 출력 할 수 있 는 형식 문자열 을 자체 적 으로 설정 할 수 있 습 니 다.프로 세 스 맵에서 알 수 있 듯 이 형식 문자열 이란 특정한 문 자 를 포함 한 문자열 이 고 그 실제 의미 에 따라 지정 한 값 으로 바 뀌 는 것 이다.본 논문 에서 Date 대상 만 예시 로 하고 형식 문자열 의 가 치 는 이 뿐만 이 아 닙 니 다.도대체 어떤 상황 에서 형식 문자열 을 사용 할 수 있 습 니까?당신 이 본문의 끝 부분 에서 답 을 찾 을 수 있 기 를 바 랍 니 다.알고리즘 소개 아래 나 는 형식 문자열 의 알고리즘 을 설명 하기 위해 예 시 를 사용 할 것 이다.이 예제 에 서 는 2008-8-8 과 같은 날짜 의'일'부분 을 포맷 합 니 다.형식 문자열 이'd'라면'8'을 출력 합 니 다.형식 문자열 이"dd"라면"08"을 출력 합 니 다.형식 문자열 이"ddd"라면"5"를 출력 합 니 다.형식 문자열 이'ddd'라면'금요일'을 출력 합 니 다.그 중에서 매개 변수 d 는 Date 대상 이 고 format 는 문자열 입 니 다.

 
//     
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 " "; 
case 1: 
return " "; 
case 2: 
return " "; 
case 3: 
return " "; 
case 4: 
return " "; 
case 5: 
return " "; 
case 6: 
return " "; 
} 
default: 
switch(d.getDay()){ 
case 0: 
return "   "; 
case 1: 
return "   "; 
case 2: 
return "   "; 
case 3: 
return "   "; 
case 4: 
return "   "; 
case 5: 
return "   "; 
case 6: 
return "   "; 
} 
} 
}); 
} 
return format; 
} 

에서 볼 수 있 습 니 다.그 핵심 부분 은 다음 과 같 습 니 다.

 
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 
} 
}); 
} 

설명:1.while 순환 을 사용 하여 형식 문자열 format 에 특정한 문자 가 포함 되 어 있 으 면 계속 실 행 됩 니 다.2.정규 표현 식 대상/[x]+/을 설명 합 니 다.그 중에서 x 는 특정한 문 자 를 표시 합 니 다.3.string 대상 의 replace 방법 으로 특정 문 자 를 교체 합 니 다.4.일치 하 는 특정한 문자열 의 길이 에 따라 서로 다른 동작 을 수행 합 니 다(이 예제 에서'd','d','dd'는 서로 다른 의 미 를 대표 합 니 다).형식 문자열 설명 은 508-1-9 14:3:5 를 예 로 들 면
형식 문자열
묘사 하 다.
예시
y
포맷 년.연 도 는 세기+년대 로 구성 되 어 있다.
"y"출력 8
"yy"출력
"yyy"출력 508
yyy 출력
"yyyyyy"출력 000508
M
포맷 월.
"M"출력 1
"MM"출력 01
"MMM"또는 더 많은 출력 1 월
d
포맷 데 이.
"d"출력 9
"dd"출력 09
"ddd"출력 1
"ddd"또는 더 많은 출력 월요일
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"); 
} 
//   DateTime   
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; 
} 
//     
function FormatYear(d, format){ 
var fullYear = d.getFullYear(); //      
var century = Math.floor(fullYear / 100); //   
var year = fullYear % 100; //   
while(format.indexOf("y") > -1){ 
var regex = /[y]+/; 
format = format.replace(regex,function(w){ 
//        "y"  "yy" ，     。      +   
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; 
} 
//     
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 "  "; 
case 2: 
return "  "; 
case 3: 
return "  "; 
case 4: 
return "  "; 
case 5: 
return "  "; 
case 6: 
return "  "; 
case 7: 
return "  "; 
case 8: 
return "  "; 
case 9: 
return "  "; 
case 10: 
return "  "; 
case 11: 
return "   "; 
case 12: 
return "   "; 
} 
} 
}); 
} 
return format; 
} 
//     
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 " "; 
case 1: 
return " "; 
case 2: 
return " "; 
case 3: 
return " "; 
case 4: 
return " "; 
case 5: 
return " "; 
case 6: 
return " "; 
} 
default: 
switch(d.getDay()){ 
case 0: 
return "   "; 
case 1: 
return "   "; 
case 2: 
return "   "; 
case 3: 
return "   "; 
case 4: 
return "   "; 
case 5: 
return "   "; 
case 6: 
return "   "; 
} 
} 
}); 
} 
return format; 
} 
//      
//H：24    
//h：12    
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; 
} 
//      
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; 
} 
//     
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; 
} 

본 고 에서 사용 한 자원 DateExtension.js 다운로드 W3C School 에서 Date 대상 에 대한 더 많은 지원 탐색js 구현 날짜 작업 클래스 DateTime 함수 코드pdf 버 전 다운로드 주소