Một cách dứt khoát để định dạng ngày cho các trang web quốc tế
Định dạng ngày thay đổi theo vùng và ngôn ngữ, vì vậy, sẽ rất hữu ích nếu chúng ta có thể tìm cách hiển thị ngày cho người dùng, cụ thể theo ngôn ngữ và vùng của họ.
Trở lại vào tháng 12 năm 2012, ECMA đã phát hành các thông số kỹ thuật của API quốc tế hóa cho JavaScript. API quốc tế hóa giúp chúng tôi hiển thị một số dữ liệu nhất định theo đặc điểm kỹ thuật và ngôn ngữ. Nó có thể được sử dụng để xác định tiền tệ, múi giờ và hơn thế nữa.
Trong bài viết này, chúng tôi sẽ xem xét định dạng ngày sử dụng API này.
Biết địa điểm của người dùng
Để hiển thị ngày theo miền địa phương ưa thích của người dùng, trước tiên chúng ta cần biết miền địa phương ưa thích đó là gì. Hiện tại cách dễ dàng để biết đó là hỏi người dùng; cho phép người dùng chọn cài đặt ngôn ngữ và khu vực ưa thích của họ trong trang web.
Nhưng, nếu đó không phải là một lựa chọn, bạn có thể diễn giải Ngôn ngữ chấp nhận yêu cầu tiêu đề hoặc đọc hoa tiêu(đối với Chrome và Firefox) hoặc navigator.browser Ngôn ngữ(đối với IE) giá trị.
Vui lòng biết rằng không phải tất cả các tùy chọn đó đều trả về ngôn ngữ ưa thích của giao diện người dùng trình duyệt.
var ngôn ngữ_tag = window.navigator.browser Ngôn ngữ | | window.navigator.l Language || "vi"; // trả về các thẻ ngôn ngữ như 'en-GB'
Kiểm tra API quốc tế hóa
Để biết trình duyệt có hỗ trợ API quốc tế hóa hay không, chúng ta có thể kiểm tra sự hiện diện của đối tượng toàn cầu Quốc tế.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // API quốc tế hóa có mặt, chúng ta hãy sử dụng nó Các Quốc tế vật
Quốc tế là một đối tượng toàn cầu để sử dụng API quốc tế hóa. Nó có ba thuộc tính là constructor cho ba đối tượng cụ thể là Collator, Số định dạng, và DateTimeFormat.
Đối tượng chúng ta sẽ sử dụng là DateTimeFormat Điều này sẽ giúp chúng tôi định dạng thời gian ngày theo các ngôn ngữ khác nhau.
Các DateTimeFormat vật
Các DateTimeFormat constructor có hai đối số tùy chọn;
địa phương- một chuỗi hoặc một chuỗi các chuỗi đại diện cho các thẻ ngôn ngữ, ví dụ; “de” cho tiếng Đức, “en-GB” cho tiếng Anh được sử dụng tại Vương quốc Anh. Nếu thẻ ngôn ngữ không được đề cập, ngôn ngữ mặc định sẽ là ngôn ngữ thời gian chạy.tùy chọn- một đối tượng có thuộc tính được sử dụng để tùy chỉnh bộ định dạng. Nó có các thuộc tính sau:
| Bất động sản | Sự miêu tả | Những giá trị khả thi |
| ngày | Ngày trong tháng | “2 chữ số”, “số” |
| kỷ nguyên | Thời đại rơi vào, ví dụ: BC | “hẹp”, “ngắn”, “Dài” |
| formatMatcher | Thuật toán được sử dụng để khớp định dạng | “căn bản”, “phù hợp nhất”[Mặc định] |
| giờ | Đại diện cho giờ trong thời gian | “2 chữ số”, “số” |
| giờ12 | Cho biết định dạng 12 giờ (thật) hoặc định dạng 24 giờ (sai) | thật, sai |
| localeMatcher | Thuật toán được sử dụng để kết hợp miền địa phương | “tra cứu”, “phù hợp nhất”[Mặc định] |
| phút | Phút trong thời gian | “2 chữ số”, “số” |
| tháng | Tháng trong một năm | “2 chữ số”, “số”, “hẹp”, “ngắn”, “Dài” |
| thứ hai | Giây trong thời gian | “2 chữ số”, “số” |
| Múi giờ | Múi giờ để áp dụng | “UTC”, mặc định là múi giờ thời gian chạy |
| timeZoneName | Múi giờ của ngày | “ngắn”, “Dài” |
| các ngày trong tuần | Ngày trong tuần | “hẹp”, “ngắn”, “Dài” |
| năm | Năm của ngày | “2 chữ số”, “số” |
Thí dụ:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * trả về một trình định dạng có thể định dạng một ngày ở định dạng ngày tiếng Anh Anh * / tùy chọn var = ngày trong tuần: 'ngắn'; var formatter = new Intl.DateTimeFormat ('en-GB', tùy chọn); / * trả về một trình định dạng có thể định dạng một ngày theo định dạng ngày tiếng Anh của Anh * cùng với các ngày trong tuần theo ký hiệu ngắn như 'Thu' cho thứ Năm * / Các định dạng chức năng
Ví dụ của DateTimeFormat đối tượng có một trình truy cập thuộc tính (getter) được gọi là định dạng trong đó trả về một hàm định dạng một Ngày dựa vào địa phương và tùy chọn tìm thấy trong DateTimeFormat ví dụ.
Hàm có một Ngày đối tượng hoặc chưa xác định như một đối số tùy chọn và trả về một chuỗi trong định dạng ngày yêu cầu.
Chú thích: Nếu đối số là một trong hai chưa xác định hoặc không được cung cấp thì nó trả về giá trị của Ngày.now () trong định dạng ngày yêu cầu.
Đây là cú pháp:
new Intl.DateTimeFormat (). format () // sẽ trả về ngày hiện tại ở định dạng ngày chạy
Và bây giờ hãy để chúng tôi mã định dạng ngày đơn giản.
Hãy để chúng tôi thay đổi ngôn ngữ và xem đầu ra.
Bây giờ, đã đến lúc xem xét các lựa chọn.
Các toLocaleDateString phương pháp
Thay vì sử dụng một trình định dạng như trong các ví dụ trên, bạn cũng có thể sử dụng Date.prototype.toLocaleString theo cùng một cách với địa phương và tùy chọn đối số, chúng tương tự nhau nhưng nên sử dụng DateTimeFormat phản đối khi xử lý quá nhiều ngày trong ứng dụng của bạn.
var mydate = Ngày mới ('2015/04/22'); var Options = weekday: "short", năm: "số", tháng: "dài", ngày: "số"; console.log (mydate.toLocaleDateString ('en-GB', tùy chọn)); // trả về "Thứ tư, ngày 22 tháng 4 năm 2015" Kiểm tra nếu địa phương được hỗ trợ
Để kiểm tra sự hỗ trợ địa phương, chúng ta có thể sử dụng phương pháp được hỗ trợLocalesOf của DateTimeFormat vật. Nó trả về một mảng của tất cả các vị trí hỗ trợ hoặc một mảng trống nếu không có vị trí nào được hỗ trợ.
Để thử nghiệm, chúng ta hãy thêm một địa điểm giả “blah” trong danh sách các địa điểm cần kiểm tra.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // trả về Mảng ["zh", "fa-pes"]
Hỗ trợ trình duyệt
Vào cuối tháng 4 năm 2015, các trình duyệt chính hỗ trợ API quốc tế hóa.
Tài liệu tham khảo
- ECMA Quốc tế: Đặc tả API quốc tế hóa ECMAScript
- IANA: Đăng ký ngôn ngữ
- Góc của Norbert: API quốc tế hóa ECMAScript
