HomeLập trìnhJavaScriptCách bắt đầu...

Cách bắt đầu quốc tế hóa trong JavaScript


bởi Alex Permyakov

8drRduLCfe1zkdHi-xSkp7QzWPdR3KoUqZn7
Ảnh của Vladislav Klapin trên Bapt

Bằng cách điều chỉnh các ứng dụng của chúng tôi cho các ngôn ngữ và quốc gia khác nhau, chúng tôi cung cấp trải nghiệm người dùng tốt hơn. Người dùng dễ dàng xử lý các ký hiệu đã biết về ngày tháng, tiền tệ và số.

Quốc tế hóa (i18n) liên quan đến việc thêm hỗ trợ cho các ngôn ngữ và quốc gia khác nhau trong ứng dụng của bạn. Số 18 là viết tắt của số chữ cái giữa chữ ‘i’ đầu tiên và chữ ‘n’ cuối cùng.

Ví dụ về quốc tế hóa có thể là hỗ trợ Unicode, tùy chỉnh giao diện người dùng cho các bảng chữ cái khác nhau hoặc sắp xếp mảng các chuỗi không phải tiếng Anh.

JavaScript triển khai đặc tả API quốc tế hóa và xác định đối tượng Intl tích hợp.

Và điều khiến nó trở nên hữu ích là nó có khả năng tương thích đa trình duyệt tuyệt vời và hỗ trợ Node.js:

afErT9QuFCwZj5spfEzr3KwZNpNKKJGaog10
https://caniuse.com/#search=intl

Bắt đầu nào!

Các Intl đối tượng cung cấp quyền truy cập vào một số hàm tạo, như:

  • Intl.DateTimeFormat — định dạng ngày và giờ nhạy cảm với ngôn ngữ.
  • Intl.NumberFormat — định dạng số nhạy cảm với ngôn ngữ.
  • Intl.PluralRules — định dạng nhạy cảm số nhiều và quy tắc ngôn ngữ số nhiều.
  • Intl.Collator — so sánh chuỗi nhạy cảm với ngôn ngữ.

Tạo bất kỳ đối tượng nào trong số này theo một mẫu đơn giản:

const formatter = new Intl.ctor(locales, options);

Ví dụ, “de-AT” ngôn ngữ: Ngôn ngữ tiếng Đức như được sử dụng ở Áo:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Sau đó, chúng tôi gọi định dạng() phương pháp với một cung cấp Ngày tháng vật:

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Nó chỉ chứa ngôn ngữ và mã quốc gia. Chúng ta sẽ sớm thấy các ví dụ toàn diện hơn. Ở đây bạn có thể tìm thấy nhiều ví dụ ngôn ngữ.

Chúng tôi có thể sử dụng navigator.language — ngôn ngữ ưa thích của người dùng mà chúng tôi sử dụng làm ngôn ngữ:

Yble1iDed6eDpaXr1GbDJw17eQQdBEpJLGu1

Ở đây thay vì gọi một định dạng trực tiếp, chúng ta có thể gán nó như một hàm. Thật tuyệt vì một khi chúng ta đã tạo ra một chức năng định dạng chuyên biệt, chúng ta có thể sử dụng nó nhiều lần.

Đọc thêm  JavaScript If-Else và If-Then – Câu lệnh có điều kiện trong JS

Chỉ cần một vài dòng mã và bạn có một ngày được bản địa hóa!

Vì vậy, tiếp theo, chúng ta sẽ tìm hiểu sâu hơn và tìm hiểu thêm về các địa phương. Nếu bạn chưa sẵn sàng và chỉ muốn xem các bản trình diễn thú vị như bản trình diễn này trong hình bên dưới — hãy xem phần ví dụ bên dưới!

kR8E22SSQXkyqqeWQfufLZmnFGpyNC-rvXhu

Lặn sâu hơn

Chà, điều này là đủ để biết cách thức hoạt động của nó, nhưng các trường hợp sử dụng thực tế có thể phức tạp hơn nhiều. Nếu chúng ta muốn:

  • hiển thị ngày của chúng tôi bằng lịch Nhật Bản hoặc Ba Tư
  • sử dụng các chữ số Thái Lan hoặc Ả Rập-Ấn Độ cho cả ngày và số
  • sử dụng tiếng Trung giản thể
  • Bất kỳ sự kết hợp nào ở trên?

Địa phương là gì?

Để làm việc với API này, chúng ta phải tìm hiểu thêm về ngôn ngữ. Trước hết, hãy đưa ra một định nghĩa.

Ngôn ngữ là một mã định danh đề cập đến một tập hợp các tùy chọn của người dùng, chẳng hạn như:

  • ngày giờ
  • số và tiền tệ
  • tên được dịch cho múi giờ, ngôn ngữ và quốc gia
  • đơn vị đo lường
  • thứ tự sắp xếp (đối chiếu)

Một ngôn ngữ không phân biệt chữ hoa chữ thường. Nó chỉ là một quy ước.

Ngôn ngữ phải là một chuỗi chứa thẻ ngôn ngữ BCP 47 và tất cả các phần được phân tách bằng dấu gạch ngang.

Hãy xem ví dụ tiếp theo:

FjMty-N4Fy5h5mLMYhFSEEzXfBB-Zwybpxnw

Một lần nữa, chỉ có bốn dòng mã? Chúng ta hãy xem sơ đồ bên dưới và kiểm tra từng phần của ngôn ngữ của chúng tôi:

QRkUyedHKCodZOv823VPd-N27228EDkZZx1I

Từ hình ảnh này, bạn có thể thấy rằng chỉ có phần đầu tiên — mã ngôn ngữ — là bắt buộc. Không chắc là bạn cần một miền địa phương như thế này. Tuy nhiên, đây là một ví dụ điển hình về việc xem xét mọi phần ngôn ngữ có thể có và nắm được ý tưởng về ngôn ngữ là gì.

Ngôn ngữ của chúng tôi chứa tất cả các phần có thể:

  • zh (mã ngôn ngữ) — ngôn ngữ Trung Quốc
  • Hans (script code) — được viết bằng ký tự giản thể
  • CN (mã quốc gia) — như được sử dụng ở Trung Quốc.
  • đức phật (biến thể) — sử dụng phương ngữ tiếng Phạn lai Phật giáo
  • u-nu-hanidec (phần mở rộng) — sử dụng số thập phân Hán
Đọc thêm  Tại sao let và const không được khởi tạo trong Javascript? - JavaScript

Bên dưới, bạn có thể tìm thêm các ví dụ về tập lệnh, biến thể và tiện ích mở rộng.

mã kịch bản

Chúng được sử dụng với các thẻ ngôn ngữ để cho biết ngôn ngữ nào được viết bằng tập lệnh nào. Ví dụ:

PNwPXNYYAhR5xM2y-OLIh2QwFuAtxXxvmK4R

mã biến thể

Các biến thể đại diện cho một phương ngữ ngôn ngữ.

q3dQcoCGdJnMB-5jl1VhPliCNA5m5Jadrtzt

Tiện ích mở rộng

Nó bao gồm các lịch và hệ thống số khác nhau.

lịch có tiền tố “u-ca-”, các giá trị có thể có (không bao gồm tất cả):

OLI1LkLJbxN65CR2UOeT8BMSRc6bVVXpehvk

hệ thống số có tiền tố “u-nu”, các giá trị có thể có (không bao gồm tất cả):

o049A-CGR9Fp4IZyTn2wI3IMy4z3ftQdbaXn

Tổ chức Iana chịu trách nhiệm cập nhật danh sách này.

đàm phán địa phương

Điều cuối cùng chúng ta phải tìm hiểu về các miền địa phương là cách chúng được giải quyết. Chúng ta đã thấy ví dụ này trước đây:

const formatter = new Intl.ctor(locales, options);

Các locales đối số đang chỉ định một ngôn ngữ hoặc một mảng ngôn ngữ. Môi trường (trình duyệt hoặc Node.js) so sánh nó với các ngôn ngữ có sẵn và chọn ngôn ngữ tốt nhất.

Có hai thuật toán so khớp:

  • tra cứu — kiểm tra từ cụ thể hơn đến ít hơn: nếu zh-Hans-SG không có sẵn, nhận zh-Hansnếu không – zh, khácmột ngôn ngữ mặc định.
  • phù hợp nhất (mặc định) — Thuật toán cải tiến. Nếu “es-GT” — Tiếng Tây Ban Nha cho Guatemala được yêu cầu, nhưng không tìm thấy, thì thay vì cung cấp dự phòng là “es”, “es-MX” — Tiếng Tây Ban Nha ở Mexico sẽ được chọn.

Nếu chúng tôi cung cấp một loạt các ngôn ngữ, thì trận đấu đầu tiên sẽ thắng.

Vì vậy, đủ lý thuyết – bây giờ là thời gian để thực hành!

ví dụ

Mã cho các ví dụ có thể được tìm thấy trên GitHub.

Định dạng ngày/giờ

lNsn0KyU79jQIZowSVdleRqsbSWZMCB5-R9U

Ngôn ngữ không phải là điều duy nhất tuyệt vời về API quốc tế. Bạn có thể sửa đổi kết quả theo cách mong muốn bằng cách sử dụng options tranh luận.

-LzjP9pShGYgbi5cPuIogpGI2UCTGlbZAZzf

Đây là một bản cập nhật lớn so với Ngày tháng vật!

Không giống như khoảnh khắc.js bạn không thể trao đổi thủ công bất kỳ phần nào của ngày như năm và tháng. Thay vào đó, bạn phải sử dụng ngôn ngữ thích hợp. Điều này nghe có vẻ giống như một giới hạnnhưng nó làm cho nó quen thuộc hơn đối với người dùng của chúng tôi.

Đọc thêm  Tôi cần bao nhiêu javascript

Định dạng số

Biết cách đối phó với ngày tháng, bạn biết cách đối phó với những con số. Sự khác biệt duy nhất là danh sách các tùy chọn:

y-b7iSrasEiJvD2WqqDq0KDAO61HZWkDNSxN

Định dạng tiền tệ

Đối với các loại tiền tệ chúng tôi sử dụng Intl.NumberFormat constructor, nhưng cung cấp một danh sách các tùy chọn khác:

RyBT6EzHcO-K4UOimN3UGIEMJaWGAzQSc6xD

Lưu ý, chúng tôi không chuyển đổi tiền ở đây. Tất cả những gì chúng tôi làm là định dạng số 172630 bằng cách sử dụng thích hợp quy luật tiền tệ. Tại đây bạn có thể tìm thấy danh sách mã tiền tệ.

Định dạng quy tắc số nhiều

Điều này cho bạn biết hình thức nào áp dụng dựa trên một số nhất định cho một ngôn ngữ cụ thể:

QvzCr-RKIwnXXRLp9LbGEQM9yxoamK-tNrnc

Nó có thể rất thuận tiện để định dạng số thứ tự:

cjYfaoKpb7V97e5vJqDqKcdxJEO2kZoVLIdE

Sắp xếp chuỗi

Sắp xếp các chuỗi có chứa các chữ cái phụ như một bằng tiếng Đức hoặc tiếng Thụy Điển không phải là điều bạn muốn thực hiện thủ công, chỉ vì thứ tự phụ thuộc vào ngôn ngữ. May mắn cho chúng tôi, chúng tôi có Intl.Collator. Và một lần nữa, tất cả những gì chúng ta phải làm là cung cấp ngôn ngữ bắt buộc:

1V0DR0viMQe--PzGNPAoIayzO1bkpWVgZzX1

Phần kết luận

Quốc tế hóa là một chủ đề lớn và phức tạp. Nhưng nếu bạn biết ngôn ngữ là gì và cách xây dựng nó, phần còn lại sẽ cực kỳ dễ sử dụng.

Đó là nó!

Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, hãy cho tôi biết trong phần bình luận bên dưới hoặc liên hệ với tôi qua Twitter.

Nếu điều này hữu ích, vui lòng nhấp vào vỗ tay ? nút xuống bên dưới một vài lần để thể hiện sự ủng hộ của bạn! ⬇⬇ ??

Dưới đây là nhiều bài báo tôi đã viết:

Cách đơn giản hóa cơ sở mã của bạn bằng map(), reduce() và filter() trong JavaScript
Khi bạn đọc về Array.reduce và nó thú vị như thế nào, ví dụ đầu tiên và đôi khi là duy nhất bạn tìm thấy là tổng của…medium.freecodecamp.orgSẵn sàng sản xuất Node.js REST API Thiết lập bằng TypeScript, PostgreSQL và Redis.
Một tháng trước, tôi được giao nhiệm vụ xây dựng API tìm kiếm đơn giản. Tất cả những gì nó phải làm là lấy một số dữ liệu từ bên thứ 3…vừa.com

Cảm ơn đã đọc ❤️





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status