>웹 프론트엔드 >JS 튜토리얼 >Moment.js를 사용하여 날짜 및 시간 관리

Moment.js를 사용하여 날짜 및 시간 관리

Joseph Gordon-Levitt
Joseph Gordon-Levitt원래의
2025-02-10 14:57:15616검색

Managing Dates and Times Using Moment.js JavaScript의 날짜 및 시간 처리는 항상 복잡했습니다. 기본 날짜 방법은 길고 API는 종종 일치하지 않습니다. 따라서 StackoverFlow에서 날짜 관련 질문을하면 "Moment.js 사용"이 다음과 같은 답변을 듣습니다.

키 포인트

moment.js는 JavaScript의 날짜 및 시간 처리를 단순화하여 날짜 및 시간 및 시간을 구문 분석, 확인, 작동 및 표시하는 방법을 제공합니다. Moment.js는 강력하지만 Moment.js는 더 크고 가변 객체가 있기 때문에 새로운 프로젝트에서 날짜 -FN과 같은 가벼운 대안을 고려하는 것이 좋습니다. Moment.js는 add (), suxtract (), fromnow () 및 diff ()와 같은 다양한 날짜 조작 및 계산 방법을 제공하며 시간 단위를 추가하거나 빼고 현재에서 시간을 계산하는 데 사용할 수 있습니다. 날짜 간의 차이와 같은 두 가지 작업을 계산합니다.

도서관은 또한 국제 언어 지원을 제공하여 사용자가 글로벌 언어를 할당하거나 특정 모멘트 객체에 대한 언어를 설정할 수 있습니다.
  • Moment.js는 무엇입니까?
  • Moment.js는 JavaScript 날짜와 시간을 처리하는 데 사용되는 스위스 군용 나이프입니다. 깨끗하고 간결한 API를 사용하여 날짜 및 시간 및 시간을 구문 분석, 확인, 작동 및 표시 할 수 있습니다.
  • 이 기사에서는 Moment.js로 시작하는 방법을 보여주고 일반적인 사용 사례를 보여줍니다.
  • 경고 : 신규 사용자는 대신 날짜 fns를 사용하십시오
  • 2020 년 9 월부터 날짜 라이브러리를 구현하려는 사용자는 대신 날짜 -FN을 사용하는 것이 좋습니다.
  • Moment.js의 기능은 크기에 비해 너무 커서 Chrome 개발자 도구는 이제 핵심 웹 메트릭 성능 테스트의 일부로 사용하지 않는 것이 적극적으로 권장됩니다. 따라서 Moment.js 유지 보수 직원에 따르면 프로젝트는 유지 보수 모드에 있으며 새로운 기능 개발이 수행되지 않습니다.
  • Moment.js의 초보자 Moment.js는 프로젝트 홈페이지에서 무료로 다운로드 할 수 있습니다. Moment.js는 브라우저 및 노드 응용 프로그램에서 실행할 수 있습니다. 노드에서 사용하려면 다음 명령을 사용하여 모듈을 설치하십시오.

    그런 다음, 그냥 필요로하고 ()를 사용하여 응용 프로그램에서 사용하십시오.

    <.> 브라우저에서 Moment.js를 실행하려면

    를 사용하십시오 날짜 서식

    과거에는 날짜 문자열을 날짜 객체로 변환하고 단일 데이터 조각을 얻은 다음 문자열 연결을 수행하는 것을 기억했습니다. Moment.js는 날짜를 특정 형식으로 변환하는 프로세스를 단순화합니다. 다음 예에서 볼 수 있듯이 모멘트를 사용하여 날짜 형식을 변환하는 것은 간단합니다.

    Calling Moment ()는 현재 날짜와 시간을 제공하고 Format ()는 지정된 형식으로 변환합니다. 이 예제는 날짜를 4 자리 연도에 이끌고 하이픈과 2 자리, 다른 하이픈 및 2 자리 날짜가 뒤 따릅니다.

    Codepen의 예를보기 : moment.js 를 사용하여 형식 날짜.

    팁 : 프로젝트 문서에 나열된 다른 날짜 형식을 실험 해보십시오.

    날짜 검증

    moment.js는 또 다른 성가신 작업 : 날짜 확인을 크게 단순화합니다. 유효성 검사를 수행하려면 날짜 문자열을 모멘트 객체와 원하는 날짜 형식으로 전달하고 isvalid () 메소드를 호출하십시오. 날짜가 유효 한 경우 true를 반환하십시오. 그렇지 않으면 false를 반환하십시오.

    그러나 순간을 사용하면 부분 날짜를 사용할 수 있으므로 예상치 못한 결과로 이어질 수 있습니다.

    이를 피하기 위해 True를 세 번째 매개 변수로 전달하여 엄격한 구문 분석 모드에 넣을 수 있습니다.
    <code class="language-bash">npm install moment</code>

    이것은이 기능을 보여주는 예입니다.

    Codepen에서 예제보기 : Moment.js
    <code class="language-javascript">const moment = require('moment');
    const today = moment();
    console.log(today.format());
    
    // 2020-01-09T15:45:51+01:00</code>
    를 사용하여 날짜 유효성을 확인하십시오. moment ()는 반환 된 객체에 다른 유용한 플래그가 많이 있습니다.

    오버플로 - 오버플로가 발생할 때 설정됩니다. 예를 들어, 월 13 일 또는 32 일.

    invalidmonth - Jannnuaarry와 같이 월이 유효하지 않은 경우 설정.
    <code class="language-javascript">moment().format('YYYY-MM-DD');</code>
    비어 - 입력 날짜에 파르슨 콘텐츠가 포함되어 있지 않은 경우 설정.

    nullinput - 입력 날짜가 null 인 경우 설정합니다.

    프로젝트 홈페이지에서 이러한 로고 및 기타 사용 가능한 로고에 대한 자세한 내용을 읽을 수 있습니다.

    작동 날짜

    모멘트 객체를 작동시키는 여러 가지 방법이 있습니다. 예를 들어, 일, 몇 달, 몇 년 등을 추가하거나 빼게됩니다. 이것은 add () 및 suxcrate () 메소드를 통해 달성됩니다. 다음 예제는 현재 날짜에 7 일, 월 또는 주를 추가하는 방법을 보여줍니다.
    • 마찬가지로, suptrict () 메소드는 다음과 같습니다.
    • 위의 각 예제는 모멘트 객체를 반환합니다. 읽기 쉬운 날짜를 원한다면 그에 따라 포맷해야합니다.
    • 현재까지의 시간
    • 또 다른 일반적인 작업은 두 날짜 사이에 얼마나 많은 시간이 존재하는지 결정하는 것입니다. 현재 날짜부터 시간을 계산하기 위해 Moment.js는 FromNow ()라는 메소드를 사용합니다. 10 년 초 이래 얼마나 많은 시간이 지났는지 확인하는 방법은 다음과 같습니다.
    • 파라미터로 True를 전달하면 접미사없이 값을 얻을 수 있습니다.
    다른 날짜부터의 시간 fromNow () 메소드는 시간을 현재 날짜와 비교하는 데 사용됩니다. 이것은 ()의 특별한 경우이며, 두 개의 임의의 날짜를 비교합니다. 다음은 ()를 사용하는 예입니다

    다음 데모 에서이 방법을 시도 할 수 있습니다.

    코드 펜의 예를보기 : moment.js 를 사용하여 다른 날짜부터 시간. 날짜의 차이를 계산하십시오 moment.js는 두 날짜의 차이를 계산하는 방법을 제공합니다. 기본적으로 차이는 밀리 초로 계산되지만 며칠, 몇 달, 몇 년 등으로 반환 할 수도 있습니다. 차이를 계산하려면 diff () 메소드를 호출하십시오. 이 메소드는 날짜를 첫 번째 매개 변수로 사용합니다. 옵션 두 번째 매개 변수를 사용하여 시간 단위를 지정할 수 있습니다. 이 매개 변수가 포함되지 않으면 밀리 초가 사용됩니다. 다음 예제와 데모는 diff ()를 사용하는 방법을 보여줍니다.

    코드 펜에서 예시보기 : moment.js 를 사용하여 날짜의 차이를 계산하십시오. 날짜 쿼리
    <code class="language-bash">npm install moment</code>
    moment.js는 또한 다양한 날짜 비교 방법을 제공합니다. 이러한 방법에는 iSbefore (), isafter () 및 issame ()이 포함되며, 이름에서 알 수 있듯이 날짜가 더 일찍, 나중에 또는 다른 날짜인지를 나타내는 부울 값을 반환합니다. 다음 예제는 iSafter ()를 사용합니다

    도약 연도를 확인하는 데 사용되는 isleapyear () 메소드도 있습니다.

    국제 언어 지원 Moment.js는 강력한 국제 지원을 제공합니다. 그것은 당신이 글로벌 언어를 할당하거나 특정 순간 개체에 대한 언어를 설정할 수 있습니다. 기본적으로 영어를 지원합니다. 다른 언어를 지원하려면 해당 언어의 주요 값을 Moment.locale에 할당하십시오. JS 문서에서 발췌 한 다음의 짧은 예는 프랑스어에 대한 지원을 추가하는 방법을 보여줍니다.

    Codepen : Moment.js 모멘트가 적합하지 않은 이유

    <code class="language-javascript">const moment = require('moment');
    const today = moment();
    console.log(today.format());
    
    // 2020-01-09T15:45:51+01:00</code>
    Moment.js는 또한 훌륭한 날짜 및 시간 라이브러리이지만 거대입니다. 예를 들어, WebPack과 함께 사용하는 경우 하나의 무고한

    만 있으면

    모든 가속화되도록 충분합니다. 이것은 패키지 크기를 크게 증가시키고 플러그인을 사용하여 줄여야합니다.
    <code class="language-javascript">moment().format('YYYY-MM-DD');</code>
    에는 많은 기능이 있지만 Lodash와 같은 라이브러리와 비교하여 원하는 기능을 선택할 수 없습니다. 대신, 항상 전체 라이브러리를로드해야합니다.

    또 다른 일반적인 불만은 순간 객체가 변한다는 것입니다. 이것은 개발자를 혼란스럽게 할 수 있습니다. 고려하십시오 : 콘솔이 무엇을 출력 할 것으로 기대하십니까? 불행히도, 코드가 모멘트 객체를 변경하여 다음 7 일 동안 설정했기 때문에 대답은 "7 일 후"( "몇 초 전"대신)입니다.

    이것은 날짜 계산이 수행되기 전에 모멘트 객체를 복제함으로써 피할 수 있지만, 그렇게하는 것을 기억할 때 이미 디버깅을 보냈을 것입니다.

    경량 대안
    <code class="language-javascript">console.log(moment("2020-01-01", "YYYY-MM-DD").isValid()); // true
    console.log(moment("not-a-date", "YYYY-MM-DD").isValid()); // false</code>
    더 가벼운 대안을 찾고있는 사람들의 경우 날짜 FNS를 사용하는 것을 고려하십시오. Date-FNS는 불변이 불가능하며, 통과 한 날짜를 변경하는 대신 항상 새 날짜를 반환합니다. 간단한 API가 있으며 웹 팩의 완벽한 동반자이며 파일 당 하나의 기능 스타일을 사용하면 원하는 것만 선택할 수 있습니다.

    더 배우고 싶다면 읽으십시오 : Date -FNS 소개 - 가벼운 JavaScript 날짜 라이브러리

    결론

    Moment.js는 실제로 날짜 및 시간과 관련된 작업 및 검증을 단순화하는 훌륭한 라이브러리입니다. 이 기사에서는 브라우저 및 node.js 응용 프로그램에서 날짜와 시간을 구문 분석, 확인 및 작동하는 데 도움이되는 Moment.js의 일부 기능을 강조합니다. Moment.js는 또한 많은 유용한 플러그인을 제공합니다. ISO 캘린더, Jalaali Calendar 등과 같은 많은 플러그인을 공식 플러그인 페이지에서 찾을 수 있습니다. Moment.js에 대한 자세한 내용은이 라이브러리 문서를 참조하십시오.

    moment.js

    Moment.js를 사용하는 방법?

    Moment.js는 NPM을 통해 프로젝트에서 사용할 수 있거나 Moment.js 웹 사이트에서 포함될 수있는 날짜 및 시간을 처리하기위한 JavaScript 라이브러리입니다. 그런 다음 CommonJS 또는 ES6 모듈 구문을 사용하여 코드로 가져올 수 있습니다. Moment.js를 사용하면 날짜 문자열 및 형식 문자열, 사전 정의 된 토큰 또는 사용자 정의 형식으로 형식 날짜, 시간을 추가하거나 빼서 날짜를 조작하고 상대 시간을 표시하여 날짜를 구문 분석 할 수 있습니다 (예 :“2 시간 전”). 또한 Moment.js는 현지화를 지원하여 다른 언어 및 형식으로 날짜를 표시하고 시간 영역 및 변환을 처리 할 수있는 기능을 제공합니다. 그러나 2020 년 9 월 이후 Moment.js는 더 이상 적극적으로 유지 관리되지 않으며 Date-FNS 또는 Intl.dateTimeFormat API와 같은 새로운 프로젝트에서 현대 날짜 및 시간 라이브러리를 고려하는 것이 좋습니다. 그들은 더 나은 성능과 공격적인 개발을 제공합니다. 순간의 ISO 시간 형식은 무엇입니까? Moment.js에서는 toisostring () 메소드를 사용하여 날짜와 시간을 ISO 8601 형식으로 포맷 할 수 있습니다. ISO 8601 형식은 표준화 된 방식으로 날짜 및 시간 정보를 나타냅니다.

    순간 개체를 날짜 개체로 변환하는 방법은 무엇입니까?

    moment.js 객체를 JavaScript 날짜 객체로 변환하려면 moment.js에서 제공 한 .todate () 메소드를 사용할 수 있습니다. .todate () 메소드는 원본 moment.js 객체와 동일한 날짜와 시간을 나타내는 JavaScript 날짜 객체를 반환합니다. 이 변환은 표준 JavaScript 날짜 개체 또는 예상 날짜 개체를 입력으로 사용하는 라이브러리 또는 API를 사용해야 할 때 유용합니다.

    현재 날짜를 순간에 얻는 방법은 무엇입니까?

    <.> Moment.js를 사용하려면 현재 날짜와 시간을 얻으려면 인수를 전달하지 않고도 Moment () 기능을 호출 할 수 있습니다.

    날짜를 늘리기 위해 모멘트를 사용하는 방법?

    <.> Moment.js를 사용하려면 날짜를 추가하려면 add () 메소드를 사용할 수 있습니다. add () 메소드를 사용하면 시간 단위 (예 : 일, 달, 몇 년 등)를 순간에 추가하거나 빼게 할 수 있습니다.

위 내용은 Moment.js를 사용하여 날짜 및 시간 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.