정보실

웹학교

정보실

javascript Moment.js를 사용하여 JavaScript 날짜 형식화

본문

바닐라 JavaScript를 사용하여 날짜 형식을 지정할 수는 있지만 대부분의 JavaScript 개발자는 그러한 마조히즘을 고려할 것입니다. 

내장 toLocaleString() 함수의 옵션 구문은 제한되어 있고 이상한 점으로 채워져 있습니다. Moment는 JavaScript에서 날짜를 깔끔한 형식의 문자열로 변환하는 데 실제로 사용되는 선택이지만 일부 사람들은 Moment를 사용하여 번들 크기를 줄이는 것을 선택하지 않습니다.


http://thecodebarbarian.com/formatting-javascript-dates-with-moment-js.html 


날짜 형식 


Moment의 format() 메서드Moment 객체를 문자열로 변환하는 데 사용합니다. 예를 들어 YYYY-MM-DD 문자열을 보다 읽기 쉬운 형식으로 변환하는 방법은 다음과 같습니다.

const moment = require('moment');

const d = new Date('2019/06/01');

moment(d).format('MMMM d, YYYY'); // June 1, 2019

format() 함수는 문자열을 받아서 모든 토큰 인스턴스를 해당 날짜 값으로 바꿉니다. 토큰은 'YYYY'또는 'd'와 같은 하위 문자열로, Moment가 해당 연도 또는 월과 같이 날짜의 일부로 대체하는 것으로 알고 있습니다. 다음은 날짜에 일반적으로 사용되는 형식화 토큰입니다.


  • YYYY: 4-digit year '2019'
  • YY: 2-digit year '19'
  • MMMM: Full-length month 'June'
  • MMM: 3 character month 'Jun'
  • MM: Month of the year, zero-padded '06'
  • M: Month of the year '6'
  • DD: Day of the month, zero-padded '01'
  • D: Day of the month '1'
  • Do: Day of the month with numeric ordinal contraction '1st'

몇 가지 일반적인 날짜 형식과 모멘트 형식 문자열로 표현하는 방법은 다음과 같습니다.


  • '2019-06-01'YYYY-MM-DD
  • 'June 1st, 2019'MMMM Do, YYYY
  • 'June \'19'MMMM 'YY
  • '6/1/2019'M/D/YYYY


때로는 모멘트 토큰과 충돌하는 형식 문자열에 텍스트를 추가하려고 합니다. 예를 들어, 'The 1st of June'과 같이 보다 정교한 날짜를 원한다면 순진하게 아래 형식을 시도 할 수 있습니다.

// 'T126 1st of June'
m.format('The Do of MMMM');

그러나 'T126 1st of June'이라는 놀라운 결과가 나옵니다. 그것은 h와 e가 모멘트 토큰이기 때문입니다. 대괄호 []를 사용하여 모멘트 토큰을 이스케이프 할 수 있습니다.

// 'The 1st of June'
m.format('[The] Do [of] MMMM');

로케일 인식 형식의 경우 L 및 LL 토큰을 사용하여 날짜의 로케일 별 형식을 얻을 수 있습니다.


moment.locale(); // 'en'

let m = moment(new Date('2019/06/01'));

m.format('L'); // 06/01/2019
m.format('LL'); // 'June 1, 2019'

// Set the Moment locale to Germany
moment.locale('de');

m = moment(new Date('2019/06/01'));
m.format('L'); // '01.06.2019'
m.format('LL'); // '1. Juni 2019'

포맷팅 시간 


모멘트는 형식화 시간도 지원합니다. format() 함수는 매우 유연하므로 날짜 구성 요소, 시간 구성 요소 또는 이 둘의 조합만 표시 할 수 있습니다. 예를 들어, 날짜 시간을 오후 2시 4 분 형식으로 표시하는 방법은 다음과 같습니다.


const moment = require('moment');

const m = moment(new Date('2019/06/01 14:04:03'));

m.format('h:mma'); // '2:04pm'

다음은 일반적으로 사용되는 시간 형식 토큰 목록입니다.


  • HH: hour of day from 0-24, zero-padded, '14'
  • H: hour of day from 0-24, '14'
  • hh: hour of day on 12-hour clock, zero-padded, '02'
  • h: hour of the day on 12 hour clock, '2'
  • mm: minute, zero-padded, '04'
  • m: minute, '4'
  • ss: second, zero-padded
  • s: second
  • A'AM' or 'PM'
  • a'am' or 'pm'


몇 가지 일반적인 날짜 형식과 모멘트 형식 문자열로 표현하는 방법은 다음과 같습니다.


  • '14:04'HH:mm
  • '14:04:03'HH:mm:ss
  • '2:04pm'h:mma
  • '2:04 PM'h:mm A


지속 시간(Durations) 


Moment는 또한 두 시간의 차이를 'a minute ago'과 같이 인간 친화적인 것으로 인간화 ​​할 수 있는 지속 시간 개념을 가지고 있습니다.


moment.diff() 함수는 두 모멘트 간의 차이를 나타내는 Moment duration 객체를 반환합니다. 예를 들면 다음과 같습니다.


const moment = require('moment');

const m1 = moment(new Date('2019/06/01 2:04:03'));
const m2 = m1.clone().add(59, 'seconds');

const duration = moment.duration(m1.diff(m2));
duration.seconds(); // 59
duration.milliseconds(); // 59000

duration.humanize(); // 'a minute'
duration.humanize(true); // 'in a minute'

moment.duration(m2.diff(m1)).humanize(true); // 'a minute ago'

humanize() 함수는 선택적 매개 변수 접미사를 가져옵니다. true로 설정하면 지속 시간이 양수인지 음수인지 ( 'in a minute' vs 'a minute ago') 나타냅니다. humanize() 함수는 로케일을 인식하므로 고객의 언어로 기간을 렌더링 할 수 있습니다.


const moment = require('moment');

// Pretend we're in Germany
moment.locale('de');

const m1 = moment(new Date('2019/06/01 2:04:03'));
const m2 = m1.clone().add(59, 'seconds');

const duration = moment.duration(m1.diff(m2));

// Prints "vor einer Minute"
console.log(duration.humanize(true));

계속 


Moment는 믿을 수 없을 정도로 다양한 기능을 갖춘 매우 강력한 라이브러리입니다. 시간대, 현지화, 덧셈 및 뺄셈, 지속 시간 : 순간은 가장 복잡한 날짜 작업을 쉽게 만듭니다. 특히 날짜 형식은 일반적으로 Moment를 새 프로젝트로 가져 오는 첫 번째 이유입니다. moment.format() 함수는 매우 유연하여 JavaScript없이 JavaScript를 작성하는 것은 상상하기 어렵습니다.


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 15회 ]  작성일19-10-30 17:53

웹학교