Окончателен начин за форматиране на датите за международни сайтове
Форматите на датите варират според региона и езика, така че винаги е полезно, ако можем да намерим начин да покажем датите на потребителите, специфични за техния език и регион.
Още през декември 2012 г. ECMA публикува спецификациите на API за интернационализация за JavaScript. Интернационализационният API ни помага да показваме определени данни в зависимост от езика и спецификацията. Може да се използва за идентифицират валутите, часовите зони и още.
В този пост ще разгледаме форматиране на дата използване на този API.
Запознайте се с локала на потребителя
За да се покаже датата по предпочитания от потребителя локал, първо трябва да знаем какво е предпочитаният локал. Понастоящем най-сигурният начин да знаете, е да попитате потребителя; да позволяват на потребителите да избират предпочитаните от тях езикови и регионални настройки в уеб страницата.
Но, ако това не е опция, можете да интерпретирате Accept-Language
заявка за заглавие или прочетете navigator.language
(за Chrome и Firefox) или navigator.browserLanguage
(за IE) стойности.
Моля, имайте предвид, че не всички от тези опции връщат предпочитания език на потребителския интерфейс на браузъра.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "Ен"; // връща езикови маркери като 'en-GB'
Проверете API за интернационализация
За да знаем дали браузърът поддържа интернационализационен API или не, можем да проверим за наличието на глобалния обект Intl
.
ако (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // API за интернационализация е налице, нека да го използваме
Най- Intl обект
Intl
е глобален обект за използване на интернационализационния API. Той има три свойства, които са конструктори за три обекта, а именно Collator
, NumberFormat
, и DateTimeFormat
.
Обектът, който ще използваме, е DateTimeFormat
което ще ни помогне да форматираме датата като на различни езици.
Най- DateTimeFormat обект
Най- DateTimeFormat
конструкторът взема два незадължителни аргумента;
локали
- низ или масив от низове, които представляват например езиковите тагове; “де” за немски език, “ен-GB” за английски, използвани в Обединеното кралство. Ако не е споменат езиков маркер, локал по подразбиране ще бъде този на средата за изпълнение.настроики
- обект, чиито свойства се използват за персонализиране на форматирането. Той има следните свойства:
Имот | описание | Възможни стойности |
ден | Ден на месеца | “2 цифри”, “числов” |
ера | Ера датата пада, Ex: BC | “тесен”, “къс”, “дълго” |
formatMatcher | Алгоритъмът, използван за съвпадение на формати | “основен”, “най-добре”[По подразбиране] |
час | Представлява часове за времето | “2 цифри”, “числов” |
hour12 | Показва 12-часов формат (вярно ) или 24-часов формат (фалшив ) | вярно , фалшив |
localeMatcher | Алгоритъмът, използван за съвпадение на локал | “погледни нагоре”, “най-добре”[По подразбиране] |
минута | Минути по време | “2 цифри”, “числов” |
месец | Месец в годината | “2 цифри”, “числов”, “тесен”, “къс”, “дълго” |
втори | Секунди по това време | “2 цифри”, “числов” |
часова зона | Часова зона за прилагане | “UTC”, по подразбиране е часовата зона за изпълнение |
timeZoneName | Часова зона на датата | “къс”, “дълго” |
делничен | Ден в седмицата | “тесен”, “къс”, “дълго” |
година | Година на датата | “2 цифри”, “числов” |
Пример:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * връща форматиране, което може да форматира датата във формат на английски език * /
var options = ден от седмицата: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', опции); / * връща форматиране, което може да форматира дата във формат на английски във Великобритания *, заедно с деня на седмицата в кратка нотация като "Чет" за четвъртък * /
Най- формат функция
Инстанцията на DateTimeFormat
обектът има свойство accessor (getter) формат
който връща функция, която форматира a Дата
базиран на локали
и настроики
намерени в DateTimeFormat
инстанция.
Функцията отнема a Дата
обект или неопределен
като незадължителен аргумент и се връща a низ
в желания формат за дата.
Забележка: Ако аргументът е или неопределен
или не се предоставя, тогава тя връща стойността на Date.now ()
в желания формат за дата.
Ето синтаксиса:
new Intl.DateTimeFormat (). format () // ще върне текущата дата в формата за дата на изпълнение
А сега нека кодираме просто форматиране на датата.
Нека променим езика и да видим изхода.
Сега е време да разгледаме възможностите.
Най- toLocaleDateString метод
Вместо да използвате форматиращо устройство, както е показано в горните примери, можете също да използвате Date.prototype.toLocaleString
по същия начин с локали
и настроики
аргументи, те са подобни, но се препоръчва да се използва DateTimeFormat
обект, когато се занимавате с твърде много дати във вашето приложение.
var mydate = new Дата ('2015/04/22'); var options = ден от седмицата: "кратък", година: "числово", месец: "дълъг", ден: "числово"; console.log (mydate.toLocaleDateString ( "ен-GB", опции)); // се връща "сряда, 22 април 2015 г."
Тествайте дали локали се поддържат
За да проверите за поддържаните локали
, можем да използваме метода supportedLocalesOf
на DateTimeFormat
обект. Той връща масив от всички поддържащи локали или празен масив, ако никой от локалите не се поддържа.
За тестване нека да добавим фиктивен локал “глупости” в списъка с локали за проверка.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // връща масив ["zh", "fa-pes"]
Поддръжка на браузър
В края на април 2015 г. основните браузъри поддържат интернационализационния API.
Препратки
- ECMA International: Спецификация на API за интернационализация на ECMAScript
- IANA: Регистър на езика Subtag
- Корнерът на Норбърт: API за интернационализация на ECMAScript