JS 시간 서식 체계 요약

JS는 현재 시간 서식 을 위한 다양한 옵션을 구현하고 있지만, 구체적으로 어떤 것을 사용하려면 프로젝트 요구 사항과 해당 기술 스택을 살펴봐야 합니다. 다음은 일반적인 방법을 요약한 것입니다:

Date 객체 API

Date 객체는 자바스크립트에서 날짜와 시간을 처리하는 기본 도구입니다. 날짜 및 시간의 다양한 부분을 가져오고 설정하고 날짜 및 시간 계산을 수행하는 다양한 메서드를 제공합니다.

// *****************************************************
// 날짜 객체 만들기
// *****************************************************
// 현재 날짜 및 시간
const currentDate = new Date();
// 밀리초를 기준으로 날짜를 생성합니다.
const specificDate = new Date(1637078487000);
// 문자열에서 날짜 만들기
const dateString = '2022-11-16T12:34:45';
const dateFromString = new Date(dateString);
// *****************************************************
// 날짜 및 시간 부분 가져오기
// *****************************************************
const year = currentDate.getFullYear();
const month = currentDate.getMonth(); // 0 11까지 수동으로+1
const day = currentDate.getDate();
const hours = currentDate.getHours();
const minutes = currentDate.getMinutes();
const seconds = currentDate.getSeconds();
// *****************************************************
// 날짜 및 시간 섹션 설정
// *****************************************************
currentDate.setFullYear(2023);
currentDate.setMonth(5); // 0 11까지
currentDate.setDate(25);
currentDate.setHours(14);
currentDate.setMinutes(30);
currentDate.setSeconds(0);

날짜 객체는 여러 가지 방식으로 시간 서식을 구현합니다:

수동 서식 지정

이것은 기본적인 방법이지만 형식을 수동으로 구성해야 합니다.

const date = new Date();
const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
console.log(formattedDate);

toLocaleString

Date 객체에는 날짜와 시간의 형식을 지정하는 toLocaleString 메서드가 있으며, 날짜와 시간을 별도로 가져오는 다른 두 가지 메서드를 파생합니다.

• 필드 설명:

• • : toLocaleTimeString()

• 매개변수 설명 :

• • 'en-US', { timeZone: 'America/new_York' }
  • en-US : 지역 설정(문자열)
  • { timeZone: 'America/new_York' }: 날짜 시간 형식 및 시간대 정보

const date = new Date();
const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
const formattedDate = date.toLocaleString('ja-JP', options);
console.log(formattedDate); // 2024/01/14 14:55:26

Intl.DateTimeFormat

Intl.DateTimeFormat은 날짜와 시간 서식을 지정하기 위한 ECMAScript 국제화 API의 일부입니다. 다양한 지역과 언어에 맞는 날짜/시간 문자열을 유연하게 생성할 수 있는 방법을 제공합니다.

// *****************************************************
// 국제 시간 만들기.DateTimeFormat  
// *****************************************************
// 'ja-JP' 는 단순화된 형식을 나타내는 지역 문자열입니다.
// 설정하지 않으면 다국어 지원을 위해 사용자 브라우저의 언어 설정에 따라 적절한 형식이 자동으로 선택됩니다.
const dateFormatter = new Intl.DateTimeFormat('ja-JP');
// *****************************************************
// 형식화된 시간
// *****************************************************
// 서식 메서드를 사용하여 날짜 개체 서식 지정하기
const date = new Date();
const formattedDate = dateFormatter.format(date);
console.log(formattedDate); // 2024/1/14

서식 옵션

Intl.DateTimeFormat을 사용하면 두 번째 매개 변수를 통해 몇 가지 옵션을 전달할 수 있습니다:

const options = {
 weekday: 'long', // 'short', 'narrow'
 year: 'numeric', // '2-digit'
 month: 'long', // 'short', 'narrow'
 day: 'numeric', // '2-digit'
 hour: '2-digit', // 'numeric'
 minute: '2-digit', // 'numeric'
 second: '2-digit', // 'numeric'
 timeZoneName: 'short', // 'long'
};
const dateFormatterWithOptions = new Intl.DateTimeFormat('ja-JP', options);
const formattedDateWithOptions = dateFormatterWithOptions.format(date);
console.log(formattedDateWithOptions); // 14일 일요일 GMT+8 15:08:43

지원되는 옵션 받기

해결된옵션 메서드를 사용하여 실제 사용된 옵션을 가져올 수 있습니다:

const optionsUsed = dateFormatter.resolvedOptions();
console.log(optionsUsed);

호환성

타사 라이브러리

다양한 기능과 날짜 서식을 지정하는 더 간단한 API를 제공하는 moment.js 또는 day.js와 같은 타사 라이브러리를 사용합니다. moment.js는공식적으로 유지 관리되지 않는 것으로 선언되었으므로 day.js 또는 네이티브 JavaScript 날짜 객체를 사용하는 것이 좋습니다.

day.js 사용 예시:

import dayjs from 'dayjs';
// dayjs 객체 만들기
const now = dayjs();
// 형식화된 날짜
const formattedDate = now.format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate);
// 사용자 지정 형식의 문자열
const customFormattedDate = now.format('YYYY/MM/DD HH:mm:ss');
console.log(customFormattedDate);

지원되는 구문 분석 자리 표시자 목록