JavaScript에서 월 이름 가져오기

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 월 이름 가져오기
Nithin Krishnan 2023년10월12일
JavaScript JavaScript DateTime
  1. JavaScript에서 toLocaleString 함수 사용
  2. JavaScript에서 Intl.DateTimeFormat 개체 사용
  3. JavaScript의 지정된 날짜에서 사용자 정의 코드를 사용하여 월 이름 가져오기
JavaScript에서 월 이름 가져오기

JavaScript에는 날짜 객체의 getMonth() 메소드가 있습니다. 0부터 시작하는 월의 인덱스를 반환합니다. 그러나 실제 시나리오의 대부분의 응용 프로그램은 최종 사용자가 더 쉽게 읽을 수 있도록 이번 달에 알파벳 이름을 요구합니다. 주어진 월 인덱스에 대한 월 이름을 나타내는 코드를 작성하는 것은 어려울 수 있습니다. JavaScript에서 월 이름을 가져오는 몇 가지 방법을 살펴보겠습니다.

JavaScript에서 toLocaleString 함수 사용

자바스크립트의 toLocaleString 함수를 사용하여 날짜 개체에서 월 이름을 가져올 수 있습니다. toLocaleString 함수에서 지원하는 특정 언어로 월 이름을 반환하는 옵션을 제공합니다.

toLocaleString 함수의 구문

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

매개변수:

함수는 일반적으로 날짜 문자열을 가져오기 위해 매개변수 없이 사용됩니다. toLocaleString은 두 개의 선택적 매개변수를 허용합니다. 첫 번째 매개변수는 언어 키이고(예: 영어의 경우 en-US, 아랍어의 경우 ar-EG 등) 두 번째 매개변수는 options는 객체입니다.

반환 유형:

toLocaleString은 MM/DD/YYYY, hh:mm:ss a 형식으로 날짜를 나타내는 문자열 값을 반환합니다. a는 AM / PM입니다.

이 함수를 사용하여 월 이름의 긴 형식과 짧은 형식을 모두 얻을 수 있습니다. 더 긴 것은 전체 월 이름을 표시하는 반면 더 짧은 것은 출력에서 ​​월 이름의 처음 세 문자만 나열합니다. 사용법은 다음과 같습니다.

const dateObj = new Date('1-1-2021');
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString('en-US');
const monthNameLong = dateObj.toLocaleString('en-US', {month: 'long'});
const monthNameShort = dateObj.toLocaleString('en-US', {month: 'short'});
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

출력:

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

{ month: 'long' }이 옵션으로 전달된 더 긴 월 이름을 얻습니다. 더 짧은 월 이름의 경우 { month: 'short' }와 같이 월 구성을 short로 설정해야 합니다.

메모

  • toLocaleString은 Internet Explorer 브라우저를 포함한 모든 브라우저에서 지원됩니다.
  • 날짜 문자열 출력을 변수에 문자열로 저장된 날짜와 비교하면 브라우저 간에 일관된 결과가 제공되지 않을 수 있습니다. 예를 들어 다음 코드는 Firefox, Internet Explorer 및 이전 버전의 MS Edge 브라우저에서 다르게 실행될 수 있습니다.
('1/5/2021, 6:00:00 PM' ===
 new Date('2021-01-05T12:30:00Z').toLocaleString('en-US')) ?
    true :
    false;

Chrome에서 출력:

true

Internet Explorer의 출력:

false

Internet Explorer 및 이전 버전의 edge는 날짜 문자열의 시작과 끝에 제어 문자를 삽입하기 때문에 발생합니다. 크롬과 인터넷 익스플로러에서 new Date("2021-01-05T12:30:00Z").toLocaleString("en-US")으로 출력된 문자열의 길이를 확인하여 차이점을 관찰할 수 있습니다. IE는 길이를 32로 표시하고 크롬은 20으로 표시합니다. 또한 IE 콘솔의 0번째 위치에 있는 문자는 ""인 반면 크롬에서는 "1"이 표시됩니다.

JavaScript에서 Intl.DateTimeFormat 개체 사용

‘Intl.DateTimeFormat’은 ‘DateTimeFormat’ 개체를 반환합니다. 대상 날짜를 입력으로 받아 우리가 설정한 ‘옵션’에 따라 형식을 지정하는 ‘형식’ 기능이 있습니다. ’toLocaleString’ 함수와 유사합니다. 차이점은 toLocaleString은 데이터 유형이 날짜인 객체에 적용된다는 것입니다. 반면 Intl.DateTimeFormat에서는 날짜를 format 함수에 대한 인수로 전달합니다. 매개변수 이름은 다양한 날짜 형식 시나리오에 따라 다릅니다(자세한 내용은 MDN 문서 참조). ‘Intl.DateTimeFormat’은 모든 브라우저에서 지원됩니다. 다음 코드와 같이 ‘Intl.DateTimeFormat’을 사용하여 월의 더 길고 짧은 이름을 얻을 수 있습니다.

new Intl.DateTimeFormat('en-US', {month: 'short'})
    .format(new Date('1-1-2021')) new Intl
    .DateTimeFormat('en-US', {month: 'long'})
    .format(new Date('1-1-2021'))

출력:

Jan
January

메모

  • Intl.DateTimeFormat 생성자는 날짜 형식 지정을 위해 생성됩니다. Intl.DateTimeFormat은 date 개체의 형식 지정과 관련하여 훨씬 더 유연합니다. 이를 사용하여 현지 언어로 날짜 문자열을 얻을 수 있습니다. options 개체에서 대체 언어를 제공하는 옵션도 지원합니다.
  • Internet Explorer의 이전 버전을 포함한 모든 웹 브라우저에서 지원됩니다.

JavaScript의 지정된 날짜에서 사용자 정의 코드를 사용하여 월 이름 가져오기

위의 두 가지 내장 JavaScript 메서드를 사용하지 않으려면 해당 날짜의 월 이름을 가져오는 사용자 지정 코드를 작성할 수 있습니다. 우리는 다양한 방법으로 코드를 작성할 수 있습니다. 우리는 두 개의 배열을 사용할 수 있습니다. 하나는 긴 월 이름을 보유하고 다른 하나는 더 짧은 월 이름을 보유합니다. 그러나 다음은 월 이름의 단일 배열을 사용하여 전체 이름과 짧은 이름을 반환하는 간결하고 효율적인 코드입니다. 다음 코드를 살펴보자.

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

getLongMonthName =
    function(date) {
  return monthNames[date.getMonth()];
}

getShortMonthName =
    function(date) {
  return monthNames[date.getMonth()].substring(0, 3);
}

    console.log(getLongMonthName(new Date('1-1-2021')));
console.log(getShortMonthName(new Date('1-1-2021')));
console.log(getLongMonthName(new Date('11-5-2021')));
console.log(getShortMonthName(new Date('11-5-2021')));
console.log(getLongMonthName(new Date('12-8-2021')));
console.log(getShortMonthName(new Date('12-8-2021')));

출력:

January
Jan
November
Nov
December
Dec

위의 코드 조각에서 두 가지 함수를 사용합니다. 하나는 전체 이름을 가져오고 다른 하나는 더 짧은 이름을 가져옵니다.

  • 날짜 객체를 매개변수로 사용하고 이에 해당하는 전체 월 이름을 반환하는 getLongMonthName() 함수를 코딩합니다. 자바스크립트 getMonth()에 내장된 함수를 사용합니다. 날짜 객체의 getMonth() 함수는 월 인덱스를 반환합니다. 이 인덱스를 사용하여 월의 전체 이름을 포함하는 monthNames 배열에서 월 이름을 가져옵니다.
  • 월 이름을 줄이는 추가 단계가 있는 getShortMonthName 기능이 있습니다. getLongMonthName과 동일한 논리를 사용합니다. 자바스크립트의 substring() 함수를 사용하여 최종 결과를 세 글자로 자릅니다. 따라서 매개변수로 전달된 날짜의 짧은 월 이름을 얻습니다.
  • 코드의 현지화 및 국제화를 허용하기 위해 둘 이상의 언어를 지원하도록 monthNames 배열을 수정해야 할 수도 있습니다. 다양한 언어의 월 이름을 저장하기 위해 다른 문자열 배열을 사용할 수 있습니다. 그리고 짧은 월 이름이 처음 세 글자인 것은 항상 사실이 아닐 수도 있습니다. 각 언어에는 짧은 월 이름에 대한 표현이 있습니다. 따라서 이러한 언어에 대해 두 개의 배열을 사용해야 할 수도 있습니다. 하나는 더 긴 월 이름을 포함하고 다른 하나는 더 짧은 월 이름을 포함합니다. getLongMonthName()의 논리를 사용하여 매개변수로 전달된 날짜 값에 해당하는 월 이름을 가져올 수 있습니다.

관련 문장 - JavaScript DateTime