Moment Duration 개체에 대한 형식 플러그인입니다.
이것은 Moment Durations에 포괄적인 형식을 추가하는 Moment.js JavaScript 날짜 라이브러리의 플러그인입니다.
형식 템플릿 문법은 기간이 날짜와 근본적으로 다르기 때문에 몇 가지 수정을 거쳐 기존 Moment Date 형식 템플릿 문법에 따라 패턴화됩니다.
이 플러그인은 Moment.js 자체 외에는 종속성이 없으며 브라우저와 Node.js에서 사용될 수 있습니다.
사용 가능하고 작동하는 경우 이 플러그인은 Intl.NumberFormat#format
또는 Number#toLocaleString
사용하여 형식화된 숫자 출력을 렌더링합니다. 불행하게도 많은 환경에서는 해당 사양의 전체 옵션 제품군을 완벽하게 구현하지 않으며 일부 환경에서는 버그가 있는 구현을 제공합니다.
이 플러그인은 각 포맷터에 대한 기능 테스트를 실행하고, 기능 테스트가 실패할 경우 포맷된 숫자 출력을 렌더링하기 위해 대체 기능으로 되돌아갑니다. 이 플러그인이 항상 대체 숫자 형식 함수를 사용하도록 하려면 useToLocaleString
false
로 설정하세요. 대체 숫자 형식 함수 출력은 이 페이지 하단에 자세히 설명된 옵션을 사용하여 현지화할 수 있습니다. 일반적으로 기본 "en"
로캘 형식이 일부 장치나 일부 환경에서 허용되지 않는 경우 대체 숫자 형식 지정 옵션을 지정해야 합니다.
이 플러그인은 OS 버전 2.2~7이 설치된 다양한 Android 기기와 OS 버전 4.3~11이 설치된 다양한 iOS 기기에서 BrowserStack을 사용하여 테스트되었습니다. 또한 Chrome, Firefox, IE 8~11 및 Edge 브라우저에서도 테스트되었습니다. .
어떤 환경에서든 포맷 문제나 이상 현상이 발견되면 문제를 제기해 주세요!
버전 2를 마무리하려면 몇 가지 항목이 남아 있습니다.
TypeScript를 지원하고, NuGet 패키지를 게시하고, 요즘 사용되는 다른 패키징 옵션을 지원하는 유형 정의를 추가합니다.
플러그인 테스트는 Moment.js 테스트 설정과 일치하도록 현대화되어야 합니다.
순간 지속 시간 형식 플러그인 버전 2를 구현한 후 버전 3에서는 몇 가지 확실한 개선 사항이 있습니다.
아래 아이디어는 이슈로 기록되고 3.0.0 마일스톤으로 태그가 지정됩니다. 보고 싶은 내용에 대한 아이디어나 의견이 있으면 이 프로젝트에 문제를 기록해 주세요!
대체 숫자 형식화 현지화 옵션은 이 플러그인이 기간 단위 레이블 현지화를 위해 이미 추가한 Moment Locale 객체 확장과 함께 포함되어야 합니다. 이렇게 하면 모든 현지화 구성이 한 곳에 모아집니다.
moment-duration-format 및 해당 대체 숫자 형식 지정 기능은 유효 숫자 및 팩션 숫자에 대해 Number#toLocaleString
과 동일한 API를 따르지 않습니다. toLocaleString
API를 사용하도록 폴백 함수를 업데이트해야 하며, 플러그인은 일부 옵션을 숨기고 precision
및 useSignificantDigits
옵션 뒤에 마스크하는 대신 API 옵션을 직접 노출해야 합니다.
대체 숫자 형식 지정 기능과 형식 지정 기능 테스트 기능을 노출하면 테스트가 용이해지고 형식 지정 기간 컨텍스트 외부에서 사용할 수 있습니다.
플러그인은 현재 게시된 버전에서 패키지 종속성으로 지정되지 않은 moment.js에 의존합니다.
Node.js
npm install moment-duration-format
나무 그늘
bower install moment-duration-format
브라우저
<script src="path/to/moment-duration-format.js"></script>
이 플러그인은 항상 root.moment
인스턴스(존재하는 경우)에 자체 설치를 시도합니다.
이 플러그인은 나중에 언제든지 호출될 수 있도록 root.momentDurationFormatSetup
에 설정 기능을 설치합니다.
브라우저에서 이 플러그인을 사용할 때 먼저 페이지에 moment.js를 포함하지 않으면 인스턴스가 생성된 후 모멘트 인스턴스에서 window.momentDurationFormatSetup
수동으로 호출해야 합니다.
이 플러그인을 모듈로 사용하려면 require
기능을 사용하세요.
var moment = require ( "moment" ) ;
var momentDurationFormatSetup = require ( "moment-duration-format" ) ;
플러그인은 다른 순간 인스턴스에서 기간 형식을 초기화할 수 있도록 init 함수를 내보냅니다.
이 플러그인을 다른 moment.js 패키지(예: moment-timezone
와 함께 사용하려면 내보낸 설정 함수를 수동으로 호출하여 원하는 패키지에 플러그인을 설치하세요.
var moment = require ( "moment-timezone" ) ;
var momentDurationFormatSetup = require ( "moment-duration-format" ) ;
momentDurationFormatSetup ( moment ) ;
typeof moment . duration . fn . format === "function" ;
// true
typeof moment . duration . format === "function" ;
// true
moment . duration . fn . format
duration.fn.format
메소드는 모든 순간 기간의 형식을 지정할 수 있습니다. 템플릿이나 다른 인수가 제공되지 않으면 기본 템플릿 함수는 기간 값을 기반으로 템플릿 문자열을 생성합니다.
moment . duration ( 123 , "minutes" ) . format ( ) ;
// "2:03:00"
moment . duration ( 123 , "months" ) . format ( ) ;
// "10 years, 3 months"
기간 형식 메서드는 세 개의 선택적 인수를 사용하여 호출할 수 있으며 형식이 지정된 문자열을 반환합니다.
moment . duration ( value , units ) . format ( [ template ] [ , precision ] [ , settings ] )
// formattedString
moment . duration . format
duration.format
메서드를 사용하면 한 번에 여러 순간 기간의 조정된 형식을 지정할 수 있습니다. 이 함수는 기간 배열을 첫 번째 인수로 받아들인 다음, duration.fn.format
함수와 동일한 세 개의 선택적 인수를 받아들입니다. 이 함수는 형식이 지정된 문자열의 배열을 반환합니다.
moment . duration . format ( durationsArray , [ template ] [ , precision ] [ , settings ] ) ;
// formattedStringsArray
단일 기간 형식 기능에 사용할 수 있는 모든 옵션은 다중 기간 형식 기능과 함께 사용할 수 있습니다. 단일 설정 개체는 각 개별 기간의 형식을 지정하는 데 사용됩니다.
moment . duration . format ( [
moment . duration ( 1 , "second" ) ,
moment . duration ( 1 , "minute" ) ,
moment . duration ( 1 , "hour" )
] , "d [days] hh:mm:ss" ) ;
// ["0:00:01", "0:01:00", "1:00:00"]
유효하지 않은 기간은 서식 지정 시 0
값을 갖는 것으로 처리됩니다.
var invalidDuration = moment . duration ( NaN , "second" ) ;
invalidDuration . isValid ( ) ;
// false
invalidDuration . format ( ) ;
// "0 seconds"
template
(string|function)은 형식화된 출력을 생성하는 데 사용되는 문자열이거나 형식 템플릿으로 사용할 문자열을 반환하는 함수입니다.
moment . duration ( 123 , "minutes" ) . format ( "h:mm" ) ;
// "2:03"
템플릿 문자열은 각 단위 유형에 대한 기간 값으로 대체되는 순간 토큰 문자에 대해 구문 분석됩니다. 순간 토큰은 다음과 같습니다:
years: Y or y
months: M
weeks: W or w
days: D or d
hours: H or h
minutes: m
seconds: s
ms: S
대괄호를 사용하여 템플릿 문자열 내의 토큰 문자를 이스케이프합니다.
moment . duration ( 123 , "minutes" ) . format ( "h [hrs], m [min]" ) ;
// "2 hrs, 3 mins"
일부 기간 형식의 경우 0으로 채워진 값이 필요합니다. 여러 토큰 문자를 함께 사용하여 올바른 양의 패딩을 만듭니다.
moment . duration ( 3661 , "seconds" ) . format ( "h:mm:ss" ) ;
// "1:01:01"
moment . duration ( 15 , "seconds" ) . format ( "sss [s]" ) ;
// "015 s"
형식 템플릿이 잘리면 가장 큰 크기로 렌더링된 토큰의 토큰 길이도 잘릴 수 있습니다. 자세한 내용은 아래의 Trim 및 forceLength 섹션을 참조하세요.
moment . duration ( 123 , "seconds" ) . format ( "h:mm:ss" ) ;
// "2:03"
밀리초에 대한 토큰 길이 2
는 특별한 경우로, mm:ss:SS
와 같은 타이머 출력의 일부로 밀리초를 렌더링하는 데 가장 많이 사용됩니다. 이 경우 밀리초 값은 3자리로 채워진 다음 왼쪽에서 잘려 2자리 출력을 렌더링합니다.
moment . duration ( 9 , "milliseconds" ) . format ( "mm:ss:SS" , {
trim : false
} ) ;
// "00:00:00"
moment . duration ( 10 , "milliseconds" ) . format ( "mm:ss:SS" , {
trim : false
} ) ;
// "00:00:01"
moment . duration ( 999 , "milliseconds" ) . format ( "mm:ss:SS" , {
trim : false
} ) ;
// "00:00:99"
moment . duration ( 1011 , "milliseconds" ) . format ( "mm:ss:SS" , {
trim : false
} ) ;
// "00:01:01"
토큰은 형식 템플릿에 여러 번 나타날 수 있지만 모든 인스턴스는 동일한 길이를 공유해야 합니다. 그렇지 않은 경우 모든 인스턴스는 해당 유형의 첫 번째 토큰 길이로 렌더링됩니다.
moment . duration ( 15 , "seconds" ) . format ( "ssss sss ss s" ) ;
// "0015 0015 0015 0015"
moment . duration ( 15 , "seconds" ) . format ( "s ss sss ssss" ) ;
// "15 15 15 15"
기본 템플릿 함수는 크기를 기준으로 기간 형식을 지정하려고 합니다. 기간 값이 클수록 형식화된 출력 단위도 커집니다.
일부 기간 값의 경우 해당 옵션이 설정 개체에 설정되지 않은 경우 기본 템플릿 기능은 기본적으로 "both"
로 trim
(자세한 내용은 아래 참조).
기본 템플릿 기능은 자동 현지화된 단위 레이블을 사용합니다(자세한 내용은 아래 참조).
moment . duration ( 100 , "milliseconds" ) . format ( ) ;
// "100 milliseconds"
moment . duration ( 100 , "seconds" ) . format ( ) ;
// "1:40"
moment . duration ( 100 , "days" ) . format ( ) ;
// "3 months, 9 days"
moment . duration ( 100 , "weeks" ) . format ( ) ;
// "1 year, 10 months, 30 days"
moment . duration ( 100 , "months" ) . format ( ) ;
// "8 years, 4 months"
템플릿 문자열에 대한 런타임 제어가 필요한 경우 사용자 정의 템플릿 함수를 사용하십시오. 템플릿 함수는 설정 개체의 this
바인딩으로 실행되며 this.duration
통해 기본 기간 개체에 액세스할 수 있습니다. 템플릿 기능을 통해 모든 설정에 액세스하거나 수정할 수 있습니다.
이 사용자 정의 템플릿 함수는 기간 값에 따라 다른 템플릿을 사용합니다.
function customTemplate ( ) {
return this . duration . asSeconds ( ) >= 86400 ? "w [weeks], d [days]" : "hh:mm:ss" ;
}
moment . duration ( 65 , 'seconds' ) . format ( customTemplate , {
trim : false
} ) ;
// "00:01:05"
moment . duration ( 1347840 , 'seconds' ) . format ( customTemplate , {
trim : false
} ) ;
// "2 weeks, 2 days"
사용자에게 친숙한 형식의 출력을 보장하기 위해 형식이 지정된 출력의 시작과 끝에서 구두점 문자가 잘립니다. 특히 선행 및 후행 기간입니다 .
, 쉼표 ,
, 콜론 :
및 공백
문자가 제거됩니다.
precision
(숫자)는 최종 값으로 표시할 소수 또는 정수 자릿수를 정의합니다.
기본 정밀도 값은 0
입니다.
moment . duration ( 123 , "minutes" ) . format ( "h [hrs]" ) ;
// "2 hrs"
양의 정밀도는 표시할 소수 자릿수를 정의합니다.
moment . duration ( 123 , "minutes" ) . format ( "h [hrs]" , 2 ) ;
// "2.05 hrs"
음수 정밀도는 0으로 잘라낼 정수 자릿수를 정의합니다.
moment . duration ( 223 , "minutes" ) . format ( "m [min]" , - 2 ) ;
// "200 mins"
settings
은 기본 순간 기간 형식 옵션을 재정의할 수 있는 개체입니다.
template
와 precision
인수는 모두 단일 settings
개체 인수의 속성으로 지정되거나 선택적 설정 개체와 함께 별도로 전달될 수 있습니다.
moment . duration ( 123 , "minutes" ) . format ( {
template : "h [hrs]" ,
precision : 2
} ) ;
// "2.05 hrs"
기본 trim
동작은 "large"
입니다.
가장 큰 크기의 토큰은 값이 없으면 자동으로 잘립니다.
moment . duration ( 123 , "minutes" ) . format ( "d[d] h:mm:ss" ) ;
// "2:03:00"
트리밍은 형식 문자열이 토큰 크기가 왼쪽에서 오른쪽으로 증가하도록 방향이 지정된 경우에도 작동합니다.
moment . duration ( 123 , "minutes" ) . format ( "s [seconds], m [minutes], h [hours], d [days]" ) ;
// "0 seconds, 3 minutes, 2 hours"
트리밍을 완전히 중지하려면 { trim: false }
설정하세요.
moment . duration ( 123 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : false
} ) ;
// "0d 2:03:00"
moment.duration.format
사용하여 여러 기간의 형식을 지정할 때 모든 기간에 대한 트리밍은 기간 집합의 합집합에서 조정됩니다.
moment . duration . format ( [
moment . duration ( 1 , "minute" ) ,
moment . duration ( 1 , "hour" ) ,
moment . duration ( 1 , "day" )
] , "y [years], w [weeks], d [days], h [hours], m [minutes]" ) ;
// [
// "0 days, 0 hours, 1 minute",
// "0 days, 1 hour, 0 minutes",
// "1 day, 0 hours, 0 minutes"
// ]
trim
문자열, 구분된 문자열 목록, 문자열 배열 또는 부울일 수 있습니다. 허용되는 값은 다음과 같습니다.
"large"
값이 있는 토큰, stopTrim
으로 식별된 토큰 또는 형식 문자열의 최종 토큰을 찾을 때까지 최대 크기의 0 값 토큰을 자릅니다. 이는 기본 trim
값입니다.
moment . duration ( 123 , "minutes" ) . format ( "d[d] h:mm:ss" ) ;
// "2:03:00"
moment . duration ( 123 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "large"
} ) ;
// "2:03:00"
moment . duration ( 0 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "large"
} ) ;
// "0"
"small"
값이 있는 토큰, stopTrim
으로 식별된 토큰 또는 형식 문자열의 최종 토큰을 찾을 때까지 크기가 가장 작은 0 값 토큰을 자릅니다.
moment . duration ( 123 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "small"
} ) ;
// "0d 2:03"
moment . duration ( 0 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "small"
} ) ;
// "0d"
"both"
"large"
트림을 실행한 다음 "small"
트림을 실행합니다.
moment . duration ( 123 , "minutes" ) . format ( "d[d] h[h] m[m] s[s]" , {
trim : "both"
} ) ;
// "2h 3m"
moment . duration ( 0 , "minutes" ) . format ( "d[d] h[h] m[m] s[s]" , {
trim : "both"
} ) ;
// "0s"
"mid"
첫 번째 또는 마지막 토큰이 아닌 값이 0인 토큰을 잘라냅니다. 일반적으로 "large"
또는 "both"
와 함께 사용됩니다. 예: "large mid"
또는 "both mid"
.
moment . duration ( 1441 , "minutes" ) . format ( "w[w] d[d] h[h] m[m] s[s]" , {
trim : "mid"
} ) ;
// "0w 1d 1m 0s"
moment . duration ( 1441 , "minutes" ) . format ( "w[w] d[d] h[h] m[m] s[s]" , {
trim : "large mid"
} ) ;
// "1d 1m 0s"
moment . duration ( 1441 , "minutes" ) . format ( "w[w] d[d] h[h] m[m] s[s]" , {
trim : "small mid"
} ) ;
// "0w 1d 1m"
moment . duration ( 1441 , "minutes" ) . format ( "w[w] d[d] h[h] m[m] s[s]" , {
trim : "both mid"
} ) ;
// "1d 1m"
moment . duration ( 0 , "minutes" ) . format ( "w[w] d[d] h[h] m[m] s[s]" , {
trim : "both mid"
} ) ;
// "0s"
"final"
값이 0인 경우 최종 토큰을 자릅니다. 값이 0인 기간의 형식을 지정할 때 빈 문자열을 출력하려면 "large"
또는 "both"
와 함께 이 옵션을 사용하십시오. 예: "large final"
또는 "both final"
.
moment . duration ( 0 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "large final"
} ) ;
// ""
moment . duration ( 0 , "minutes" ) . format ( "d[d] h:mm:ss" , {
trim : "small final"
} ) ;
// ""
moment . duration ( 0 , "minutes" ) . format ( "d[d] h[h] m[m] s[s]" , {
trim : "both final"
} ) ;
// ""
"all"
값이 0인 토큰을 모두 잘라냅니다. "both mid final"
의 약어입니다.
moment . duration ( 0 , "minutes" ) . format ( "d[d] h[h] m[m] s[s]" , {
trim : "all"
} ) ;
// ""
"left"
이 플러그인의 버전 1 API를 지원하려면 "large"
으로 매핑됩니다.
"right"
이 플러그인의 버전 1 API를 지원하려면 "large"
으로 매핑됩니다.
true
"large"
으로 매핑됩니다.
null
"large"
으로 매핑됩니다.
false
트리밍을 비활성화합니다.
값이 있는 가장 큰 크기의 토큰부터 시작하여 n
가장 큰 크기 순간 토큰만 출력하려면 largest
값을 양의 정수로 설정합니다.
largest
옵션을 사용하면 기본값이 "all"
로 trim
.
moment . duration ( 7322 , "seconds" ) . format ( "d [days], h [hours], m [minutes], s [seconds]" , {
largest : 2
} ) ;
// "2 hours, 2 minutes"
moment . duration ( 1216800 , "seconds" ) . format ( "y [years], w [weeks], d [days], h [hours], m [minutes], s [seconds]" , {
largest : 3
} ) ;
// "2 weeks, 2 hours"
trim
다른 값으로 설정하거나 stopTrim
사용하면 시작 토큰과 나머지 출력이 변경될 수 있습니다.
moment . duration ( 1216800 , "seconds" ) . format ( "y [years], w [weeks], d [days], h [hours], m [minutes], s [seconds]" , {
largest : 3 ,
trim : "both"
} ) ;
// "2 weeks, 0 days, 2 hours"
moment . duration ( 1216800 , "seconds" ) . format ( "y [years], w [weeks], d [days], h [hours], m [minutes], s [seconds]" , {
largest : 3 ,
trim : "both" ,
stopTrim : "m"
} ) ;
// "2 weeks, 0 days, 2 hours"
moment . duration ( 1216800 , "seconds" ) . format ( "y [years], w [weeks], d [days], h [hours], m [minutes], s [seconds]" , {
largest : 4 ,
trim : false