국제 사이트 날짜 지정 서식있는 방법
날짜 형식은 지역 및 언어에 따라 다르므로 해당 언어 및 지역에 따라 사용자에게 날짜를 표시하는 방법을 찾을 수 있다면 항상 도움이됩니다..
2012 년 12 월 ECMA는 JavaScript 용 국제화 API 사양을 발표했습니다. 국제화 API를 사용하면 언어 및 구두 사양에 따라 특정 데이터를 표시 할 수 있습니다. 그것은에 익숙하다. 통화, 시간대 식별 그리고 더.
이 게시물에서 우리는 날짜 형식 지정 이 API 사용.
사용자의 로케일 알기
사용자의 선호 로케일별로 날짜를 표시하려면 먼저 원하는 로케일이 무엇인지 알아야합니다. 현재 그것을 알 수있는 절대 안전한 방법은 사용자에게 묻는 것입니다. 사용자가 웹 페이지에서 선호 언어 및 지역 설정을 선택하도록 허용.
하지만 이것이 옵션이 아니라면 수락 언어 요청 헤더를 읽거나 navigator.language(Chrome 및 Firefox 용) 또는 navigator.browserLanguage(IE의 경우) 값.
모든 옵션이 브라우저 UI의 기본 언어를 반환하지는 않습니다..
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // 'en-GB'와 같은 언어 태그를 반환합니다.
국제화 API 확인
브라우저가 국제화 API를 지원하는지 여부를 알기 위해 전역 객체가 있는지 확인할 수 있습니다. Intl.
if (window.hasOwnPropertyâ €‹( "Intl") && typeof Intl === "object") // 국제화 API가 있음, 사용하자
그만큼 Intl 목적
Intl Internationalization API를 사용하기위한 전역 객체입니다. 그것은 3 개의 객체를위한 생성자 인 3 개의 프로퍼티를 가진다. Collator, NumberFormat, 과 DateTimeFormat.
우리가 사용할 객체는 DateTimeFormat 다른 언어에 따라 날짜 시간을 형식화하는 데 도움이 될 것입니다..
그만큼 DateTimeFormat 목적
그만큼 DateTimeFormat 생성자는 두 개의 선택적 인수를 취합니다.
로케일- 언어 태그를 나타내는 문자열 또는 문자열의 배열입니다 (예 :). “드” 독일어, “en-GB” 영국에서 사용되는 영어 용. 언어 태그가 언급되지 않은 경우, 기본 로케일은 런타임의 기본 로케일이됩니다.옵션들- 포매터를 커스터마이즈하기 위해서 프로퍼티를 사용하는 객체 다음과 같은 속성을가집니다.
| 재산 | 기술 | 가능한 값 |
| 일 | 일 | “2 자릿수”, “숫자” |
| 연대 | 시대가 시작될 때, 예 : BC | “제한된”, “짧은”, “긴” |
| formatMatcher | 형식 일치에 사용되는 알고리즘 | “기본”, “최고로 잘 맞는”[태만] |
| 시간 | 시간을 시간으로 나타냅니다. | “2 자릿수”, “숫자” |
| 12시 | 12 시간 형식을 나타냄참된) 또는 24 시간 형식 (그릇된) | 참된, 그릇된 |
| localeMatcher | 로케일 매칭에 사용되는 알고리즘 | “조회”, “최고로 잘 맞는”[태만] |
| 분 | 시간 분 | “2 자릿수”, “숫자” |
| 달 | 1 년에 1 개월 | “2 자릿수”, “숫자”, “제한된”, “짧은”, “긴” |
| 둘째 | 시간의 초 | “2 자릿수”, “숫자” |
| 시간대 | 적용 할 시간대 | “UTC”, 기본값은 런타임 시간대입니다. |
| timeZoneName | 날짜의 시간대 | “짧은”, “긴” |
| 주일 | 요일 | “제한된”, “짧은”, “긴” |
| 년 | 날짜의 해 | “2 자릿수”, “숫자” |
예:
var formatter = new Intl.DateTimeFormat ( 'en-GB'); / * 영국 영어 날짜 형식으로 날짜 형식을 지정할 수있는 포맷터를 반환합니다. * /
var options = 평일 : '짧음'; var formatter = new Intl.DateTimeFormat ( 'en-GB', options); / * 목요일의 경우 'Thu'와 같은 짧은 표기법으로 평일과 함께 영국식 영어 날짜 형식으로 날짜 형식을 지정할 수있는 포맷터를 반환합니다. * /
그만큼 체재 기능
의 인스턴스 DateTimeFormat 객체에 호출 된 속성 접근 자 (getter)가 있습니다. 체재 이 함수는 날짜 를 기반으로 로케일 과 옵션들 발견 된 DateTimeFormat 예.
이 함수는 날짜 물건 또는 정의되지 않은 선택적 인수로 끈 요청한 날짜 형식으로.
노트 : 인수가 정의되지 않은 또는 제공되지 않으면 값을 반환합니다. Date.now () 요청한 날짜 형식으로.
구문은 다음과 같습니다.
new Intl.DateTimeFormat (). format () // 현재 날짜를 런타임 날짜 형식으로 반환합니다.
이제 간단한 날짜 형식을 코딩하겠습니다..
우리가 언어를 바꾸고 결과물을 보자..
이제 옵션을 살펴 보겠습니다..
그만큼 toLocaleDateString 방법
위의 예와 같이 포맷터를 사용하는 대신 Date.prototype.toLocaleString 같은 방식으로 로케일 과 옵션들 인수는 비슷하지만 비슷합니다. DateTimeFormat 응용 프로그램에서 너무 많은 날짜를 처리 할 때 객체.
var mydate = new Date ( '2015/04/22'); var 옵션 = 평일 : "short", 연도 : "numeric", month : "long", day : "numeric"; console.log (mydate.toLocaleDateString ( 'en-GB', options)); // 2015 년 4 월 22 일 수요일을 반환합니다.
테스트가 로케일 지원된다
지원되는지 확인하려면 로케일, 우리는이 방법을 사용할 수있다. supportedLocalesOf 의 DateTimeFormat 목적. 지원되는 모든 로케일의 배열을 반환하거나 지원되는 로케일이없는 경우 빈 배열을 반환합니다..
테스트를 위해 더미 로케일을 추가합시다. “~을” 검사 할 로케일 목록에서.
console.log (Intl.DateTimeFormat.supportedLocalesOf ([ "zh", "blah", "fa-pes"]))); // Array [ "zh", "fa-pes"]를 반환합니다.
브라우저 지원
2015 년 4 월 말, 주요 브라우저는 국제화 API를 지원합니다..
참고 문헌
- ECMA International : ECMAScript 국제화 API 사양
- IANA: 언어 서브 태그 레지스트리
- Norbert 's Corner : ECMAScript 국제화 API
