JavaScript의 날짜에 대해 알아야 할 모든 것

JavaScript의 날짜 객체는 종종 날짜와 시간을 처리해야 할 때마다 도서관 (예 : 날짜 FN 및 순간)으로 돌아가는 것을 혼란스럽게합니다.

그러나 우리는 항상 라이브러리가 필요하지는 않습니다. 주의를 기울여야 할 사항을 알고 있다면 실제로 날짜는 매우 간단 할 수 있습니다. 이 기사에서는 날짜 개체에 관한 모든 것을 안내해 드리겠습니다.

먼저, 시간대의 존재를 인정합시다.

시간대

세계에는 수백 개의 시간대가 있습니다. JavaScript에서는 현지 시간과 UTC (Universal Time)의 두 가지에만 관심이 있습니다.

• 현지 시간은 컴퓨터가있는 시간대를 말합니다.
• UTC 는 실제로 그리니치 평균 시간 (GMT)과 동의어입니다.

기본적으로 JavaScript의 거의 모든 날짜 방법 (1 개 제외)은 현지 시간의 날짜/시간을 제공합니다. UTC를 지정할 때만 UTC를 얻을 수 있습니다.

이것들과 함께 우리는 창조 날짜에 대해 논의 할 수 있습니다.

생성 날짜

new Date() 사용하여 날짜를 만들 수 있습니다. new Date() 사용하는 4 가지 가능한 방법이 있습니다.

1. 날짜 문자열을 사용하십시오
2. 날짜 매개 변수를 사용하십시오
3. 타임 스탬프를 사용하십시오
4. 매개 변수없이

날짜 문자열 메소드

날짜 문자열 메서드에서 날짜 문자열을 new Date 로 전달하여 날짜를 만들 수 있습니다.

 새로운 날짜 ( '1988-03-21')

날짜를 작성할 때 날짜 문자열 메서드를 사용하는 경향이 있습니다. 우리는 우리의 모든 생애 날짜를 사용했기 때문에 자연 스럽습니다.

내가 21-03-1988을 썼다면, 1988 년 3 월 21 일에 질문이 없을 것입니다. 맞습니까? 그러나 JavaScript로 21-03-1988을 작성하면 Invalid Date 나타납니다.

이것은 좋은 이유가 있습니다.

우리는 세계의 다른 지역에서 날짜 문자열을 다르게 해석합니다. 예를 들어, 11-06-2019는 2019 년 6 월 11 일 또는 2019 년 11 월 6 일에있을 수 있습니다. 그러나 내가 사용하고있는 날짜 시스템을 알지 못하면 내가 언급하고있는 것을 확신 할 수 없습니다.

JavaScript에서는 날짜 문자열을 사용하려면 전 세계적으로 허용되는 형식을 사용해야합니다. 이 형식 중 하나는 ISO 8601 확장 형식입니다.

 <code>// ISO 8601 扩展格式`YYYY-MM-DDTHH:mm:ss.sssZ`</code>

값이 의미하는 바는 다음과 같습니다.

• Yyyy : 4 자리
• MM : 2 자리 개월 (1 월 01 일, 12 월 12 일)
• DD : 2 자리 날짜 (0 ~ 31)
• -: 날짜 분리기
• T : 시간의 시작을 나타냅니다
• HH : 24 자리 시간 (0 ~ 23)
• MM : 분 (0 ~ 59)
• SS : 초 (0 ~ 59)
• SSS : 밀리 초 (0 ~ 999)
• :: 시간 분리기
• Z : z가 존재하면 날짜는 UTC로 설정됩니다. Z가 존재하지 않으면 현지 시간입니다. (이것은 시간이 제공되는 경우에만 적용됩니다.)

날짜, 시간, 분, 초 및 밀리 초를 만드는 경우 선택 사항입니다. 따라서 2019 년 6 월 11 일 날짜를 만들려면 다음을 작성할 수 있습니다.

 새 날짜 ( '2019-06-11')

이것에 특별한주의를 기울이십시오. 날짜 문자열을 사용하여 날짜를 만드는 데 큰 문제가 있습니다. 이 날짜를 console.log 문제를 찾을 수 있습니다.

GMT 뒤에있는 지역에 거주하는 경우 6 월 10 일로 표시됩니다.

GMT로 이어지는 지역에 거주하는 경우 6 월 11 일로 날짜가 표시됩니다.

날짜 문자열 메소드에 특별한 동작이 있기 때문에 발생합니다. 날짜를 생성하는 경우 (시간을 지정하지 않음) UTC로 설정됩니다.

위의 경우 new Date('2019-06-11') 작성하면 실제로 만든 날짜는 2019 년 6 월 11 일 오전 12시 UTC입니다. 그렇기 때문에 GMT 뒤에있는 지역에 사는 사람들은 6 월 11 일 대신 6 월 10 일을받습니다.

날짜 문자열 메서드를 사용하여 현지 시간에 날짜를 만들려면 시간을 포함시켜야합니다. 시간을 포함시킬 때는 적어도 HH와 MM을 작성해야합니다 (그렇지 않으면 Chrome은 잘못된 날짜를 반환합니다).

 새 날짜 ( '2019-06-11T00 : 00')

날짜 문자열 사용에 대한 UTC 문제가있는 전체 현지 시간은 오류를 잡기가 어려울 수 있습니다. 따라서 날짜 문자열을 사용하여 날짜를 만들지 않는 것이 좋습니다.

(브라우저는 다른 방식으로 날짜 문자열을 구문 분석 할 수 있으므로 MDN은 날짜 문자열 메서드를 사용하지 말라고 경고합니다).

날짜를 만들려면 매개 변수 또는 타임 스탬프를 사용하십시오.

매개 변수로 날짜를 만듭니다

날짜/시간을 생성하기 위해 최대 7 개의 매개 변수를 전달할 수 있습니다.

1. 연도 : 4 자리.
2. 월 : 월 (0-11). 몇 달은 처음부터 시작됩니다. 생략하면 기본값은 0입니다.
3. 날짜 : 달의 날짜 (1-31). 생략하면 기본값은 1입니다.
4. 시간 : 시간의 시간 (0-23). 생략하면 기본값은 0입니다.
5. 분 : 분 (0-59). 생략하면 기본값은 0입니다.
6. 초 : 초 (0-59). 생략하면 기본값은 0입니다.
7. 밀리 초 : 밀리 초 (0-999). 생략하면 기본값은 0입니다.

 // 2019 년 6 월 11 일, 5:23:59 AM, 현지 시간 새 날짜 (2019, 5, 11, 5, 23, 59)

많은 개발자 (직접 포함)는 복잡해 보이기 때문에 매개 변수 방법을 사용하지 않습니다. 그러나 실제로는 매우 간단합니다.

왼쪽에서 오른쪽으로 숫자를 읽으십시오. 왼쪽에서 오른쪽으로, 연도, 월, 일, 시간, 분, 두 번째 및 밀리 초 및 밀리 초와 같은 진폭 감소에 값을 삽입합니다.

 새로운 날짜 (2017, 3, 22, 5, 23, 50)

// 왼쪽에서 오른쪽으로 공식을 따르는 경우이 날짜를 쉽게 읽을 수 있습니다.
// 연도 : 2017,
// 월 : 4 월 (월이 처음부터 시작되기 때문에)
// 날짜 : 22
// 시간 : 05
// 분 : 23
// 초 : 50

가장 문제가되는 부분은 달 값이 0에서 시작한다는 것입니다. 즉, 1 월 === 0, 2 월 === 1, 3 월 == 2 등으로 시작한다는 것입니다.

JavaScript가 처음부터 시작하는 것은 약간 이상합니다 (Java가 그렇게하기 때문에) 그러나 1 월이 왜 1 (0이 아닌)이어야하는 이유를 주장하기보다는 JavaScript에서 몇 달 동안 처음부터 시작하는 것이 좋습니다. 이 사실을 받아들이면 날짜가 더 쉬워집니다.

다음은 친숙한 몇 가지 예입니다.

 // 1988 년 3 월 21 일, 오전 12시, 현지 시간.
새로운 날짜 (1988, 2, 21)

// 2019 년 12 월 25 일 오전 8시, 현지 시간.
새로운 날짜 (2019, 11, 25, 8)

// 2023 년 11 월 6 일, 오전 2시 20 분, 현지 시간 새 날짜 (2023, 10, 6, 2, 20)

// 2019 년 6 월 11 일, 5:23:59 AM, 현지 시간 새 날짜 (2019, 5, 11, 5, 23, 59)

매개 변수를 사용하여 생성 된 날짜는 모두 현지 시간입니까?

이것은 매개 변수를 사용하면 추가 된 이점 중 하나입니다. 현지 시간과 UTC를 혼동하지 않습니다. UTC가 필요한 경우 UTC에서 날짜를 만들 수 있습니다.

 // 2019 년 6 월 11 일, 오전 12시, UTC.
새 날짜 (date.utc (2019, 5, 11))

타임 스탬프로 날짜를 만듭니다

JavaScript에서 타임 스탬프는 1970 년 1 월 1 일부터 통과하는 밀리 초의 수입니다 (1970 년 1 월 1 일은 UNIX Epoch Time이라고도합니다). 내 경험상, 당신은 타임 스탬프를 사용하여 날짜를 만들지 않습니다. 타임 스탬프 만 사용하여 다른 날짜를 비교합니다 (나중에 자세히 설명).

 // 2019 년 6 월 11 일 오전 8시 (현지 시간에 싱가포르)
새 날짜 (1560211200000)

매개 변수없이

매개 변수가없는 날짜를 작성하면 날짜가 현재 시간 (로컬 시간)으로 설정됩니다.

 새로운 날짜 ()

내가 이것을 쓸 때 싱가포르 시간은 2019 년 5 월 25 일 오전 11시 10 분이라는 이미지에서 볼 수 있습니다.

생성 날짜 요약

1. new Date() 사용하여 날짜를 만들 수 있습니다.
2. 가능한 구문에는 4 가지가 있습니다.
   1. 날짜 문자열을 사용하십시오
   2. 사용 매개 변수
   3. 타임 스탬프를 사용하십시오
   4. 매개 변수없이
3. 날짜 문자열 메소드를 사용하여 날짜를 만들지 마십시오 .
4. 매개 변수 메소드를 사용하여 날짜를 만드는 것이 가장 좋습니다.
5. JavaScript의 달이 처음부터 시작된다는 것을 기억하고 수락하십시오.

다음으로 날짜를 읽을 수있는 문자열로 변환하는 것에 대해 이야기합시다.

형식 날짜

대부분의 프로그래밍 언어는 원하는 날짜 형식을 만들기위한 서식 도구를 제공합니다. 예를 들어, PHP에서는 2019 년 1 월 23 일과 비슷한 날짜로 date("d MY") 쓸 수 있습니다.

그러나 JavaScript에서 날짜를 포맷하는 쉬운 방법은 없습니다.

기본 날짜 객체에는 7 가지 형식의 형식이 있습니다. 이 7 가지 방법 각각은 특정 값을 제공합니다 (그리고 매우 쓸모가 없습니다).

 Const Date = New Date (2019, 0, 23, 17, 23, 42)

1. toString 2019 년 1 월 23 일 수요일을 제공합니다 17:23:42 GMT 0800 (싱가포르 표준 시간)
2. toDateString 2019 년 1 월 23 일 수를 제공합니다
3. toLocaleString 23/01/2019, 17:23:42를 제공합니다
4. toLocaleDateString 23/01/2019를 제공합니다
5. toGMTString 2019 년 1 월 23 일 09:23:42 GMT를 제공합니다.
6. toUTCString Wed, 2019 년 1 월 23 일 09:23:42 GMT를 제공합니다.
7. toISOString 2019-01-23T09 : 23 : 42.079Z를 제공합니다

사용자 정의 형식이 필요한 경우 직접 만들어야합니다.

사용자 정의 날짜 형식을 작성하십시오

2019 년 1 월 23 일 Thu와 같은 것을 원한다고 가정 해 봅시다.이 값을 만들려면 날짜 개체와 함께 제공되는 날짜 방법을 이해하고 사용해야합니다.

날짜를 얻으려면이 네 가지 방법을 사용할 수 있습니다.

1. getFullYear : 현지 시간을 기준으로 4 자리를 받으십시오
2. getMonth : 현지 시간을 기준으로 달 (0-11)을 받으십시오. 몇 달은 처음부터 시작됩니다.
3. getDate : 현지 시간 (1-31)을 기준으로 한 달에 날짜를 얻으십시오.
4. getDay : 현지 시간을 기준으로 요일 (0-6)을 받으십시오. 요일은 일요일 (0)에서 시작하여 토요일 (6)에 끝납니다.

2019 년 1 월 23 일 THU에 23과 2019 년을 만드는 것은 간단합니다. 우리는 getFullYear 와 getDate 사용하여 얻을 수 있습니다.

 const d = 새로운 날짜 (2019, 0, 23)
const 년 = d.getlyear () // 2019
const date = d.getDate () // 23

Thu와 1 월을 얻는 것은 어렵습니다.

1 월을 얻으려면 12 개월 값을 각 이름에 매핑하는 객체를 만들어야합니다.

 const 달 = {
  0 : '1 월',
  1 : '2 월',
  2 : '3 월',
  3 : '4 월',
  4 : '5 월',
  5 : '6 월',
  6 : '7 월',
  7 : '8 월',
  8 : '9 월',
  9 : '10 월',
  10 : '11 월',
  11 : '12 월'
}

달은 0에서 시작되므로 객체 대신 배열을 사용할 수 있습니다. 동일한 결과를 생성합니다.

 Const Month = [
  '1월',
  '2월',
  '3월',
  '4월',
  '5월',
  '6월',
  '칠월',
  '팔월',
  '구월',
  '십월',
  '십일월',
  '12월'
]]

1 월을 얻으려면 다음과 같이 필요합니다.

1. getMonth 사용하여 날짜부터 시작하는 달을 얻으십시오.
2. months 동안 월 이름을 얻으십시오

 const monthindex = d.getmonth ()
const monthname = monst [monthindex]
Console.log (MonthName) // 1 월

약어 버전 :

 const monthname = monst [d.getmonth ()]
Console.log (MonthName) // 1 월

당신은 Thu와 똑같이합니다. 이번에는 일주일에 7 일이 포함 된 배열이 필요합니다.

 Const Days = [
  '해',
  '월',
  'tue',
  '수',
  'thu',
  'fri',
  '앉았다'
]]

그럼 당신 :

1. getDay 사용하여 dayIndex 를 얻으십시오
2. dayIndex 사용하여 dayName 을 얻으십시오

 const dayindex = d.getday ()
const dayname = days [dayindex] // thu

약어 버전 :

 const dayname = days [d.getday ()] // thu

그런 다음 생성 한 모든 변수를 결합하여 형식으로 구성된 문자열을 얻습니다.

 const formatted =`$ {dayName}, $ {date} $ {MonthName} $ {Year}`
Console.log (형식) // Thu, 2019 년 1 월 23 일

예, 번거 롭습니다. 그러나 일단 당신이 속임수를 얻으면 불가능합니다.

사용자 정의 형식을 작성 해야하는 경우 다음 방법을 사용할 수 있습니다.

1. getHours : 현지 시간을 기준으로 시간 (0-23)을 얻습니다.
2. getMinutes : 현지 시간을 기준으로 몇 분 (0-59).
3. getSeconds : 현지 시간을 기준으로 몇 초 (0-59).
4. getMilliseconds : 현지 시간을 기준으로 밀리 초 (0-999)를 얻습니다.

다음으로 날짜 비교에 대해 이야기합시다.

날짜를 비교하십시오

한 날짜가 다른 날짜보다 일찍 또는 늦게 있는지 알고 싶다면>, = 및

 const 이전 = 새로운 날짜 (2019, 0, 26)
const = new 날짜 (2019, 0, 27)

console.log (이전 <p> 두 날짜가 동시에 떨어지면 비교하기가 더 어렵습니다. == 또는 ===를 사용하여 비교할 수 없습니다.</p><pre class="brush:php;toolbar:false"> const a = 새로운 날짜 (2019, 0, 26)
Const B = New Date (2019, 0, 26)

console.log (a == b) // false
console.log (a === b) // false

두 날짜가 동시에 떨어지는 지 확인하려면 getTime 사용하여 타임 스탬프를 확인할 수 있습니다.

 const issametime = (a, b) => {
  return a.gettime () === B. gettime ()
}

const a = 새로운 날짜 (2019, 0, 26)
Const B = New Date (2019, 0, 26)
Console.log (issametime (a, b)) // true

두 날짜가 같은 날에 있는지 확인하려면 getFullYear , getMonth 및 getDate 값을 확인할 수 있습니다.

 const issameday = (a, b) => {
  return A.getLyEar () === B.getLyEar () &&
    a.getMonth () === B. getMonth () &&
    a.getDate () === B.getDate ()
}

Const A = New Date (2019, 0, 26, 10) // 2019 년 1 월 26 일, 오전 10:00 AM Const B = New Date (2019, 0, 26, 12) // 2019 년 1 월 26 일, 12:00 Noon Console.log (Ismameday (A, B)) // True

우리가 소개해야 할 것이 하나 더 있습니다.

다른 날짜에서 데이트를받습니다

다른 날짜에서 날짜를 가져와야하는 두 가지 가능한 시나리오가 있습니다.

1. 다른 날짜에서 특정 날짜/시간 값을 설정하십시오.
2. 다른 날짜에서 증분을 추가/빼기.

특정 날짜/시간을 설정하십시오

이 방법을 사용하여 다른 날짜에서 날짜/시간을 설정할 수 있습니다.

1. setFullYear : 현지 시간에 4 자리 연도를 설정합니다.
2. setMonth : 현지 시간에 달을 설정하십시오.
3. setDate : 현지 시간에 달에 날짜를 설정합니다.
4. setHours : 현지 시간에 시간을 설정하십시오.
5. setMinutes : 현지 시간에 몇 분을 설정합니다.
6. setSeconds : 현지 시간에 몇 초를 설정합니다.
7. setMilliseconds : 현지 시간에 밀리 초를 설정합니다.

예를 들어, 날짜를 월 15 일로 설정하려면 setDate(15) 사용할 수 있습니다.

 const d = 새로운 날짜 (2019, 0, 10)
D. 세트 데이트 (15)

Console.log (d) // 2019 년 1 월 15 일

월을 6 월까지 설정하려면 setMonth 사용할 수 있습니다. (JavaScript에서 몇 달 동안 처음부터 시작하십시오!)

 const d = 새로운 날짜 (2019, 0, 10)
D. 세트 모일 (5)

Console.log (D) // 2019 년 6 월 10 일

참고 : 위의 설정 메소드는 원래 날짜 객체를 변경합니다. 실제로, 우리는 객체를 변경해서는 안됩니다 (이유는 여기에 자세히 설명되어 있습니다). 새로운 날짜 개체에서 이러한 작업을 수행해야합니다.

 const d = 새로운 날짜 (2019, 0, 10)
const newdate = 새로운 날짜 (d)
NewDate.Setmonth (5)

Console.log (D) // 2019 년 1 월 10 일 Console.log (NewDate) // 2019 년 6 월 10 일

다른 날짜에서 증분을 추가/빼기

증분은 변화입니다. 다른 날짜에서 증가한 점수를 추가/빼면 : 다른 날짜에서 X 거리가있는 날짜를 얻으려고합니다. X 년, X 개월, X 일 등이 될 수 있습니다.

증분을 얻으려면 현재 날짜의 가치를 알아야합니다. 다음 방법을 사용하여 얻을 수 있습니다.

1. getFullYear : 현지 시간을 기준으로 4 자리를 받으십시오
2. getMonth : 현지 시간을 기준으로 달 (0-11)을 받으십시오.
3. getDate : 현지 시간 (1-31)을 기준으로 한 달에 날짜를 얻으십시오.
4. getHours : 현지 시간을 기준으로 시간 (0-23)을 얻습니다.
5. getMinutes : 현지 시간을 기준으로 몇 분 (0-59).
6. getSeconds : 현지 시간을 기준으로 몇 초 (0-59).
7. getMilliseconds : 현지 시간을 기준으로 밀리 초 (0-999)를 얻습니다.

증분을 추가/빼는 두 가지 일반적인 방법이 있습니다. 첫 번째 방법은 스택 오버플로에서 더 인기가 있습니다. 간결하고 명확하지만 이해하기 어렵습니다. 두 번째 방법은 더 장점이지만 이해하기 쉽습니다.

이 두 가지 방법을 소개하겠습니다.

오늘부터 3 일 동안 날짜를 얻고 싶다고 가정 해 봅시다. 이 예에서는 오늘도 오늘은 2019 년 3 월 28 일이라고 가정합니다 (고정 날짜를 사용하는 경우 설명하기가 더 쉽습니다).

첫 번째 방법 (설정 방법)

// 오늘은 2019 년 3 월 28 일이라고 가정합니다. 오늘 Const = New Date (2019, 2, 28)

먼저 새 날짜 개체를 만듭니다 (따라서 원래 날짜를 변경하지 않음)

 const finaldate = 새로운 날짜 (오늘)

다음으로 변경하려는 가치를 알아야합니다. 날짜가 변경되기 때문에 getDate 사용하여 날짜를 얻을 수 있습니다.

 const currentDate = today.getDate ()

우리는 오늘보다 3 일 후 데이트를 원합니다. 현재 날짜에 증분 (3)을 추가합니다.

 FinalDate.SetDate (CurrentDate 3)

메소드 설정을위한 전체 코드 :

 Const Today = New Date (2019, 2, 28)
const finaldate = 새로운 날짜 (오늘)
FinalDate.SetDate (오늘 .getDate () 3)

Console.log (FinalDate) // 2019 년 3 월 31 일

두 번째 방법 (새 날짜 방법)

여기서 우리는 변경하려는 값의 유형을 찾을 때까지 getFullYear , getMonth , getDate 및 기타 getter 방법을 사용합니다. 그런 다음 new Date 사용하여 마지막 날짜를 만듭니다.

 Const Today = New Date (2019, 2, 28)

// 필수 값을 얻는다 const 연도 = 오늘 .getlyearear ()
const month = today.getmonth ()
const day = today.getDate ()

// 새 날짜 만들기 (증분 포함)
const finaldate = 새로운 날짜 (연도, 월, 3 일)

Console.log (FinalDate) // 2019 년 3 월 31 일

두 방법 모두 작동합니다. 하나를 선택하고 고수하십시오.

자동 날짜 수정

허용 가능한 범위를 넘어서 날짜를 제공하는 경우 JavaScript는 자동으로 날짜를 다시 계산합니다.

여기 예입니다. 날짜를 2019 년 3 월 33 일로 설정했다고 가정 해 봅시다 (달력에는 3 월 33 일이 없음). 이 경우 JavaScript는 3 월 33 일부터 4 월 2 일까지 자동으로 조정됩니다.

 // 3 월 33 일 => 4 월 2 일 새 날짜 (2019, 2, 33)

즉, 증분을 생성 할 때는 몇 분, 시간, 날짜, 달 등을 계산하는 것에 대해 걱정할 필요가 없습니다. JavaScript는 자동으로 처리합니다.

 // 3 월 33 => 4 월 2 일 새 날짜 (2019, 2, 30 3)

이것은 JavaScript 기본 날짜 개체에 대해 알아야 할 모든 것입니다.

JavaScript의 날짜에 대한 자세한 내용

• JavaScript의 날짜와 시간 이해 (DigitalOcean)
• JavaScript 날짜 개체 탐색 (alligator.io)

더 많은 JavaScript를 배우는 데 관심이 있습니까?

이 날짜 소개가 유용하다는 것을 알게되면 JavaScript에 대해 알아야 할 모든 것을 사람들에게 가르치기 위해 만든 코스 인 JavaScript를 배우는 것이 좋습니다.

이 과정에서는 알아야 할 기본 개념을 소개 한 다음 실제 구성 요소를 구축하는 데 배운 개념을 사용하는 방법을 보여 드리겠습니다.

보세요. 유용 할 수 있습니다.

또한 JavaScript 문제가 있으면 언제든지 저에게 연락하십시오. 귀하의 질문에 답변하기 위해 무료 기사를 만들기 위해 최선을 다하겠습니다.

위 내용은 JavaScript의 날짜에 대해 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!