From f63331d085dc024ea57a30bc869cc78636597562 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Mon, 13 Sep 2021 23:01:45 +0900 Subject: Update Intl.DateTimeFormat --- .../intl/datetimeformat/datetimeformat/index.md | 273 +++++++++++++++++++ .../global_objects/intl/datetimeformat/index.md | 301 +++++---------------- 2 files changed, 348 insertions(+), 226 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md (limited to 'files/ko') diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md new file mode 100644 index 0000000000..a27f5aa944 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md @@ -0,0 +1,273 @@ +--- +title: Intl.DateTimeFormat() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +tags: + - Constructor + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat`** 생성자는 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} 객체를 생성합니다. + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}} + +## 구문 + +```js +new Intl.DateTimeFormat() +new Intl.DateTimeFormat(locales) +new Intl.DateTimeFormat(locales, options) +``` + +### 매개변수 + +- `locales` {{optional_inline}} + + - : [BCP 47](https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8) 언어 태그를 포함하는 문자열이나 문자열의 배열입니다. 브라우저 기본 로케일을 사용하려면 빈 배열을 지정하세요. `en-US-u-ca-buddhist`처럼 유니코드 확장 형태도 지원합니다. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} 문서를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다. + + - `nu` + - : 사용할 기수법. "`arab`", + "`arabext`", "`bali`", "`beng`", + "`deva`", "`fullwide`", "`gujr`", + "`guru`", "`hanidec`", "`khmr`", + "`knda`", "`laoo`", "`latn`", + "`limb`", "`mlym`", "`mong`", + "`mymr`", "`orya`", "`tamldec`", + "`telu`", "`thai`", "`tibt`" 등을 사용할 수 있습니다. + - `ca` + - : 역법. "`buddhist`", + "`chinese`", "`coptic`", "`ethiopia`", + "`ethiopic`", "`gregory`", "`hebrew`", + "`indian`", "`islamic`", "`iso8601`", + "`japanese`", "`persian`", "`roc`" 등을 사용할 수 있습니다. + - `hc` + - : 시간제. "`h11`", + "`h12`", "`h23`", "`h24`" 등을 사용할 수 있습니다. + +- `options` {{optional_inline}} + + - : 다음 속성 일부 또는 전부를 포함하는 객체입니다. + + - `dateStyle` + - : `format()`을 호출했을 때 사용할 날짜 서식입니다. 가능한 값은 다음을 포함합니다. + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **참고:** `dateStyle`은 `timeStyle`과 함께 사용할 수 있지만, 다른 옵션인 `weekday`, `hour`, `month` 등과는 함께 사용할 수 없습니다. + + - `timeStyle` + - : `format()`을 호출했을 때 사용할 시간 서식입니다. 가능한 값은 다음을 포함합니다. + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **참고:** `timeStyle`은 `dateStyle`과 함께 사용할 수 있지만, 다른 옵션인 `weekday`, `hour`, `month` 등과는 함께 사용할 수 없습니다. + + - `calendar` + - : 역법입니다. "`buddhist`", + "`chinese`", " `coptic`", "`ethiopia`", + "`ethiopic`", "`gregory`", " `hebrew`", + "`indian`", "`islamic`", "`iso8601`", " + `japanese`", "`persian`", "`roc`" 등을 사용할 수 있습니다. + + - `dayPeriod` + - : (영어의 경우) "in the morning", "am", "noon", "n"처럼 시간의 위치를 나타낼 때 사용할 시간 서식입니다. "`narrow`", "`short`", " `long`" 등을 사용할 수 있습니다. + + > **참고:** + > + > - 12시간제 형식을 사용할 때만 결과의 차이가 있습니다. + > - 한국어를 포함해, 많은 로케일에서는 지정한 너비에 상관하지 않고 같은 문자열을 반환합니다. ("새벽", "밤" 등) + + - `numberingSystem` + - : 기수법입니다. "`arab`", + "`arabext`", " `bali`", "`beng`", + "`deva`", "`fullwide`", " `gujr`", + "`guru`", "`hanidec`", "`khmr`", " + `knda`", "`laoo`", "`latn`", + "`limb`", "`mlym`", " `mong`", + "`mymr`", "`orya`", "`tamldec`", " + `telu`", "`thai`", "`tibt`" 등을 사용할 수 있습니다. + + - `localeMatcher` + - : 로케일 매칭 알고리즘입니다. 가능한 값은 "`lookup`", "`best fit`"이며 기본 값은 "`best fit`"입니다. 자세한 정보는 {{jsxref("Intl", "Intl", "#로케일_조정", 1)}} 문서를 참고하세요. + + - `timeZone` + - : 시간대입니다. 구현체가 반드시 인식해야 하는 유일한 값은 "`UTC`"입니다. 기본 값은 런타임의 기본 시간대입니다. 구현체에 따라 "`Asia/Seoul`", "`Asia/Kolkata`", + "`America/New_York`"처럼 [IANA 시간대 데이터베이스](https://www.iana.org/time-zones)의 시간대 이름을 인식할 수도 있습니다. + + - `hour12` + - : 24시간제 대신 12시간제를 사용할지에 대한 여부입니다. 가능한 값은 `true` 또는 `false`입니다. 기본 값은 로케일에 따라 다릅니다. 이 값은 언어 태그의 `hc`, 옵션 중 `hourCycle`보다 우선합니다. + + - `hourCycle` + - : 시간제입니다. "`h11`", + "`h12`", "`h23`", "`h24`" 등을 사용할 수 있습니다. 이 값은 언어 태그의 `hc`보다 우선하며, `hour12`가 이 값보다 우선합니다. + + - `formatMatcher` + - : 서식 매칭 알고리즘입니다. 가능한 값은 "`basic`", "`best fit`"이며 기본 값은 "`best fit`"입니다. 자세한 설명은 아래 내용을 참고하세요. + + 이하 속성은 서식 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 구성요소 조합을 지원해야 합니다. + + - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` + - `weekday`, `year`, `month`, `day` + - `year`, `month`, `day` + - `year`, `month` + - `month`, `day` + - `hour`, `minute`, `second` + - `hour`, `minute` + + 구현체에 따라 다른 구성요소 조합을 지원할 수도 있습니다. 시간 서식을 요청하면, 현재 구현체가 지원하는 모든 구성요소 조합 중 최적 조합을 탐색해 사용합니다. 탐색 알고리즘은 `formatMatcher` 옵션 속성을 사용해 지정할 수 있고, [명세에 완벽히 정의된 "`basic`" 알고리즘](https://402.ecma-international.org/1.0/#BasicFormatMatcher)과 구현체에 따라 다른 "`best-fit`" 알고리즘의 두 종류가 있습니다. + + - `weekday` + + - : 요일. 가능한 값은 다음과 같습니다. + + - "`long`" (`금요일`, `Thursday` 등) + - "`short`" (`(금)`, `Thu` 등) + - "`narrow`" (`(금)`, `T` 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: `Thursday`와 `Tuesday` 둘 다 `T`) + + - `era` + + - : 시대. 가능한 값은 다음과 같습니다. + + - "`long`" (`서기`, `Anno Domini` 등) + - "`short`" (`AD` 등) + - "`narrow`" (`A`, `AD` 등) + + - `year` + + - : 연도. 가능한 값은 다음과 같습니다. + + - "`numeric`" (`2019년`, `2019` 등) + - "`2-digit`" (`19년`, `19` 등) + + - `month` + + - : 월. 가능한 값은 다음과 같습니다. + + - "`numeric`" (`3` 등) + - "`2-digit`" (`03` 등) + - "`long`" (`3월`, `March` 등) + - "`short`" (`Mar` 등) + - "`narrow`" (`M` 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: `March`와 `May` 둘 다 `M`) + + - `day` + + - : 일. 가능한 값은 다음과 같습니다. + + - "`numeric`" (`1` 등) + - "`2-digit`" (`01` 등) + + - `hour` + - : 시. 가능한 값은 `"numeric"`, `"2-digit"`입니다. + - `minute` + - : 분. 가능한 값은 `"numeric"`, `"2-digit"`입니다. + - `second` + - : 초. 가능한 값은 `"numeric"`, `"2-digit"`입니다. + - `fractionalSecondDigits` + + - : 밀리초를 나타낼 소숫점 이하 자릿수. 가능한 값은 다음과 같습니다. + + - `0` (밀리초를 표시하지 않음.) + - `1` (밀리초를 한 자리까지 표시함. 예를 들어, 0.736초는 7까지 보입니다.) + - `2` (밀리초를 두 자리까지 표시함. 예를 들어, 0.736초는 73로 보입니다.) + - `3` (밀리초를 세 자리까지 표시함. 예를 들어, 0.736초는 736으로 보입니다.) + + - `timeZoneName` + + - : 시간대 이름. 가능한 값은 다음과 같습니다. + + - "`long`" 지역화된 긴 시간대 이름 (`한국 표준시`, `British Summer Time`) + - "`short`" 지역화된 짧은 시간대 이름 (`PST`, `GMT+9`) + - "`shortOffset`" 지역화된 GMT 형식 (`GMT-8`, `GMT+9`) + - "`longOffset`" 지역화된 긴 GMT 형식 (`GMT+0900`) + - "`shortGeneric`" 지역을 특정하지 않는 일반적인 형식 (`PT`) + - "`longGeneric`" 지역을 특정하지 않는 긴 일반적인 형식 (`Pacific Time`) + + > **참고:** 요구한 형식을 사용할 수 없을 경우 시간대 서식이 다른 형태로 대체될 수 있습니다. 예를 들어 지역을 특정하지 않는 서식의 경우 특정 국가나 도시 이름을 포함하지 않아야 하지만, "Los Angeles Time"처럼 필요할 경우 이름을 포함할 수 있습니다. + + 각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 `undefined`일 경우, `year`, `month`, `day`는 "`numeric`"으로 취급합니다. + +## 예제 + +### DateTimeFormat 사용하기 + +로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다. + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// 매개변수 없이 toLocaleString() 호출한 결과는 +// 구현체, 기본 로케일, 기본 시간대에 다라 달라짐 +console.log(new Intl.DateTimeFormat().format(date)); +// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20." +``` + +### timeStyle과 dateStyle 사용하기 + +다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 `locales` 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요. + +```js +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "short" +}); +console.log(o.format(Date.now())); // "13:31 AM" + +let o = new Intl.DateTimeFormat("en" , { + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20" + +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "medium", + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM" +``` + +### timeZoneName 사용하기 + +`timeZoneName`을 사용하면 시간대도 결과에 포함할 수 있습니다. + +```js +var date = Date.UTC(2021, 11, 17, 3, 0, 42); +const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric'] + +for (const zoneName of timezoneNames) { + var formatter = new Intl.DateTimeFormat('en-US', { + timeZone: 'America/Los_Angeles', + timeZoneName: zoneName, + }); + console.log(zoneName + ": " + formatter.format(date) ); +} + +// 예상 출력 결과: +// > "short: 12/16/2021, PST" +// > "long: 12/16/2021, Pacific Standard Time" +// > "shortOffset: 12/16/2021, GMT-8" +// > "longOffset: 12/16/2021, GMT-08:00" +// > "shortGeneric: 12/16/2021, PT" +// > "longGeneric: 12/16/2021, Pacific Time" +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Global_Objects/Intl", "Intl")}} diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md index deb61cb636..6dcaaa0200 100644 --- a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md +++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -2,200 +2,66 @@ title: Intl.DateTimeFormat slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat tags: + - Class - DateTimeFormat - Internationalization - Intl - JavaScript + - Localization - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat --- -
{{JSRef}}
- -

Intl.DateTimeFormat은 언어에 맞는 날짜 및 시간 서식을 지원하는 객체의 생성자입니다. dateStyle과 timeStyle 옵션을 통해 날짜와 시간 형식을 빠르게 맞출 수 있고, 더 자세한 조정을 위한 다른 옵션도 존재합니다.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
- - - -

구문

- -
new Intl.DateTimeFormat([locales[, options]])
-Intl.DateTimeFormat.call(this[, locales[, options]])
- -

매개변수

- -
-
locales {{optional_inline}}
-
-

BCP 47 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "Intl 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다.

- -
-
nu
-
사용할 기수법. "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" 등을 사용할 수 있습니다.
-
ca
-
역법. "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc" 등을 사용할 수 있습니다.
-
hc
-
시간 사이클. "h11", "h12", "h23", "h24" 등을 사용할 수 있습니다.
-
-
-
options {{optional_inline}}
-
-

다음 속성을 포함하는 객체.

- -
-
dateStyle
-
format()을 호출했을 때 사용할 날짜 서식. 가능한 값은 다음을 포함합니다. -
    -
  • "full"
    • -
  • "long"
    • -
  • "medium"
    • -
  • "short"
    • -
-
-
timeStyle
-
format()을 호출했을 때 사용할 시간 서식. 가능한 값은 다음을 포함합니다. -
    -
  • "full"
    • -
  • "long"
    • -
  • "medium"
    • -
  • "short"
    • -
-
-
localeMatcher
-
사용할 로케일 매칭 알고리즘. 가능한 값은 "lookup"과 "best fit"이고, 기본값은 "best fit"입니다. 자세한 정보는 {{jsxref("Intl", "Intl 문서", "#로케일_조정", 1)}}를 참고하세요.
-
timeZone
-
사용할 시간대. 구현체가 반드시 인식해야 하는 유일한 값은 "UTC"입니다. 기본값은 런타임의 기본 시간대입니다. 구현체에 따라 "Asia/Shanghai", "Asia/Kolkata", "America/New_York" 등 IANA 시간대 데이터베이스의 시간대 이름을 인식할 수도 있습니다.
-
hour12
-
24시간제 대신 12시간제를 사용할지 여부. 가능한 값은 true 와 false이고, 기본값은 로케일에 따라 다릅니다. 이 옵션을 지정하면 hc 언어 태그와 hourCycle 옵션을 모두 무시합니다.
-
hourCycle
-
사용할 시간제. 가능한 값은 "h11", "h12", "h23", "h24"입니다. 이 옵션을 지정하면 hc 언어 태그를 무시합니다. hour12 옵션을 지정한 경우 그 값이 우선순위를 가집니다.
-
formatMatcher
-
사용할 서식 매칭 알고리즘. 가능한 값은 "basic"과 "best fit"이고, 기본값은 "best fit"입니다. 아래의 단락에서 이 속성의 자세한 정보를 확인하세요.
-
- -

이후의 속성은 서식을 적용한 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 부분집합을 지원해야 합니다.

- -
    -
  • weekday, year, month, day, hour, minute, second
    • -
  • weekday, year, month, day
    • -
  • year, month, day
    • -
  • year, month
    • -
  • month, day
    • -
  • hour, minute, second
    • -
  • hour, minute
    • -
- -

구현체에 따라 다른 집합을 지원할 수도 있습니다. 서식 요청은 가능한 모든 부분집합 조합 중 최적으로 일치하는 집합으로 조정됩니다. 조정 알고리즘에는 명세에 완벽히 정의된 basic 알고리즘과, 구현체에 따라 다른 best-fit 알고리즘 두 종류가 있으며 formatMatcher 속성의 값이 어느 쪽을 사용할지 결정합니다.

- -
-
weekday
-
요일. 가능한 값은 다음과 같습니다. -
    -
  • "long" (금요일, Thursday 등)
    • -
  • "short" ((금), Thu 등)
    • -
  • "narrow" ((금), T 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: Thursday와 Tuesday 둘 다 T)
    • -
-
-
era
-
시대. 가능한 값은 다음과 같습니다. -
    -
  • "long" (서기, Anno Domini 등)
    • -
  • "short" (AD 등)
    • -
  • "narrow" (A, AD 등)
    • -
-
-
year
-
연도. 가능한 값은 다음과 같습니다. -
    -
  • "numeric" (2019년, 2019 등)
    • -
  • "2-digit" (19년, 19 등)
    • -
-
-
month
-
월. 가능한 값은 다음과 같습니다. -
    -
  • "numeric" (3 등)
    • -
  • "2-digit" (03 등)
    • -
  • "long" (3월, March 등)
    • -
  • "short" (Mar 등)
    • -
  • "narrow" (M 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: March와 May 둘 다 M)
    • -
-
-
day
-
일. 가능한 값은 다음과 같습니다. -
    -
  • "numeric" (1 등)
    • -
  • "2-digit" (01 등)
    • -
-
-
hour
-
시. 가능한 값은 "numeric", "2-digit"입니다.
-
minute
-
분. 가능한 값은 "numeric", "2-digit"입니다.
-
second
-
초. 가능한 값은 "numeric", "2-digit"입니다.
-
timeZoneName
-
시간대 이름. 가능한 값은 다음과 같습니다. -
    -
  • "long" (한국 표준시, British Summer Time등)
    • -
  • "short" (GMT+9 등)
    • -
-
-
- -

각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 {{jsxref("undefined")}}일 경우, year, month, day는 "numeric"으로 취급합니다.

-
-
- -

설명

- -

속성

- -
-
{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}
-
모든 인스턴스에 속성을 추가할 수 있습니다.
-
- -

메서드

- -
-
{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
-
주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.
-
- -

DateTimeFormat 인스턴스

- -

속성

- -

DateTimeFormat 인스턴스는 프로토타입의 다음 속성을 상속합니다.

- -
{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '속성')}}
- -

메서드

- -

DateTimeFormat 인스턴스는 프로토타입의 다음 메서드를 상속합니다.

- -
{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '메서드')}}
- -

예제

- -

DateTimeFormat 사용하기

- -

로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// 매개변수 없이 toLocaleString() 호출한 결과는
+{{JSRef}}
+
+**`Intl.DateTimeFormat`**은 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 객체입니다.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
+
+## 생성자
+
+- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}
+  - : 새로운 `Intl.DateTimeFormat` 객체를 생성합니다.
+
+## 정적 메서드
+
+- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+  - : 매개변수로 제공한 로케일 목록 중, 런타임이 현재 지원하는 로케일 항목을 배열로 반환합니다.
+
+## 인스턴스 메서드
+
+- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
+  - : `DateTimeFormat` 객체의 로케일과 서식 옵션에 맞춰 날짜를 서식화해 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
+  - : 날짜 서식 문자열의 각 부분을 분해하여 토큰 객체로 만들고 {{jsxref("Array")}}로 반환합니다. 로케일에 따라 다른 사용자 지정 서식을 적용할 때 사용할 수 있습니다.
+- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+  - : `DateTimeFormat` 객체를 초기화할 때 할당된 로케일 및 서식 옵션의 계산 값을 나타내는 객체를 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
+  - : 두 개의 [Dates](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)를 받은 후, 현재 할당된 로케일과 옵션 내에서 가장 간결한 형태로 두 날짜의 범위를 나타내는 문자열을 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
+  - : 두 개의 [Dates](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)를 받은 후, 현재 할당된 로케일과 옵션 내에서 가장 간결한 형태로 두 날짜의 범위를 나타내는 문자열을 생성합니다. 문자열의 각 부분을 분해하여 토큰 객체로 만들고 {{jsxref("Array")}}로 반환합니다.
+
+## 예제
+
+### `DateTimeFormat` 사용하기
+
+로케일을 지정하지 않고 사용하면 기본 로케일과 기본 옵션의 서식을 적용한 문자열을 반환합니다.
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 매개변수 없이 toLocaleString()을 호출한 결과는
 // 구현체, 기본 로케일, 기본 시간대에 다라 달라짐
 console.log(new Intl.DateTimeFormat().format(date));
-// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20."
-
+// → ko-KR 로케일(언어)과 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20." +``` -

locales 사용하기

+### 로케일 지정하기 -

다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 locales 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.

+다음 예제는 지역화된 숫자 서식 방법을 보여줍니다. 사용자의 언어에 적합한 서식을 적용하려면 `locales` 매개변수로 해당 언어(필요한 경우 대체 언어까지)를 제공하는 걸 잊지 마세요. -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
 // 아래 결과는 모두 Asia/Seoul 시간대를 사용한 결과 (UTC+0900, 한국 표준시)
 
@@ -224,13 +90,14 @@ console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
 // 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어
 console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
 // → "20/12/2012"
-
+``` -

options 사용하기

+### 옵션 지정하기 -

options 매개변수를 지정해 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다.

+`options` 매개변수를 지정하면 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다. -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
 // 긴 날짜 서식에 더해 요일 요청
 var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
@@ -261,43 +128,25 @@ options = {
 };
 console.log(new Intl.DateTimeFormat('en-US', options).format(date));
 // → "12/19/2012, 19:00:00"
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 1.0')}}Initial definition.
{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}{{Spec2('ES Int Draft')}}
- -

브라우저 호환성

- -
- - -

{{Compat("javascript.builtins.Intl.DateTimeFormat")}}

-
- -

같이 보기

- -
{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}
+ +// 옵션을 지정하면서 로케일은 브라우저 기본값을 사용하고 싶을 땐 'default' 지정 +console.log(new Intl.DateTimeFormat('default', options).format(date)); +// → "2012. 12. 19. 19시 0분 0초" + +// 오전/오후 시간 표시가 필요할 때 +options = {hour: "numeric", dayPeriod: "short"}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → 10 at night +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl")}} -- cgit v1.2.3-54-g00ecf