API quốc tế đơn giản hóa việc định dạng và thao tác với văn bản, số, ngày và đơn vị tiền tệ được quốc tế hóa. Nó cho phép bạn xử lý các định dạng dữ liệu khác nhau theo ngôn ngữ.
API này giải quyết thách thức về định dạng dữ liệu cho các nền văn hóa và ngôn ngữ khác nhau. Nó giúp dễ dàng định dạng số bằng ký hiệu tiền tệ hoặc ngày thích hợp bằng cách sử dụng định dạng ngày thích hợp cho một vùng cụ thể.
Sử dụng API quốc tế, bạn có thể tạo các ứng dụng web có thể truy cập và dễ sử dụng cho khán giả ở các khu vực và nền văn hóa.
Nhận ngôn ngữ của người dùng
Các hàm tạo JavaScript do API quốc tế cung cấp xác định ngôn ngữ mà chúng sẽ sử dụng để định dạng ngày, văn bản, số, v.v., theo một mẫu quen thuộc. Mỗi nhà xây dựng có một miền địa phương và một tùy chọn đối tượng làm đối số. Sử dụng các đối số này, hàm tạo khớp (các) ngôn ngữ được yêu cầu với các ngôn ngữ mà chúng hiện hỗ trợ.
Để có được ngôn ngữ của người dùng, bạn có thể sử dụng hoa tiêu.ngôn ngữ tài sản. Thuộc tính này trả về một chuỗi đại diện cho phiên bản ngôn ngữ của trình duyệt.
Giá trị của hoa tiêu.ngôn ngữ thuộc tính là thẻ ngôn ngữ BCP 47, bao gồm mã ngôn ngữ và, tùy chọn, mã vùng và các thẻ phụ khác. Ví dụ: “en-US” đại diện cho tiếng Anh được nói ở Hoa Kỳ.
Bạn cũng có thể sử dụng navigator.languages thuộc tính để nhận một mảng các ngôn ngữ ưa thích của người dùng, được sắp xếp theo mức độ ưu tiên. Mục đầu tiên trong mảng đại diện cho tùy chọn ngôn ngữ chính của người dùng.
Khi bạn đã có được ngôn ngữ của người dùng, bạn có thể tùy chỉnh hiển thị ngày, giờ, số và đơn vị tiền tệ của ứng dụng bằng cách sử dụng quốc tế API.
Bạn có thể tạo một hàm JavaScript đơn giản để giúp bạn lấy ngôn ngữ của người dùng. Đây là một đoạn mã có thể giúp:
const getUserLocale = () => {
if (navigator.languages && navigator.languages.length) {
return navigator.languages[0];
}
return navigator.language;
};console.log(getUserLocale());
Cái này getUserLocale hàm trả về phần tử đầu tiên của thuộc tính navigator.languages nếu có. Nếu không, nó sẽ quay trở lại thuộc tính navigator.language, đại diện cho ngôn ngữ ưa thích của người dùng trong các trình duyệt cũ hơn.
Định dạng ngày cho các địa điểm khác nhau
Để định dạng ngày bằng cách sử dụng quốc tế API, bạn có thể sử dụng Intl.DateTimeFormat() người xây dựng. Hàm tạo này nhận hai đối số: một chuỗi ngôn ngữ và một đối tượng tùy chọn.
Đối tượng tùy chọn có thể chứa các thuộc tính kiểm soát định dạng ngày tháng.
Một số tùy chọn thường được sử dụng bao gồm:
- ngày thường: Tùy chọn này chỉ định định dạng của ngày trong tuần. Bạn có thể đặt nó thành một trong hai dài (Thứ sáu), ngắn (Thứ Sáu), hoặc chật hẹp (F).
- năm: Tùy chọn này chỉ định định dạng của năm. Bạn có thể đặt nó thành một trong hai con số (2023) hoặc 2 chữ số (23).
- tháng: Tùy chọn này chỉ định định dạng của tháng. Bạn có thể đặt nó thành một trong hai con số (3), 2 chữ số (03), dài (Bước đều), ngắn (tháng 3), hoặc chật hẹp (M).
- ngày: Tùy chọn này chỉ định định dạng của ngày. Bạn có thể đặt nó thành một trong hai con số (2) hoặc 2 chữ số (02).
Đây là một ví dụ cho thấy cách định dạng một ngày bằng cách sử dụng Intl.DateTimeFormat() người xây dựng:
const date = Date.now()
const locale = getUserLocale();const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);
console.log(formatter.format(date));
Mã này thiết lập một đối tượng định dạng bằng cách chuyển ngôn ngữ của người dùng tới Intl.DateTimeFormat(), cùng với một tập hợp các tùy chọn. Sau đó, nó sử dụng trình định dạng để chuyển đổi ngày hiện tại thành một chuỗi. Các tùy chọn đối tượng chứa các thuộc tính kiểm soát định dạng của ngày tháng.
Định dạng các loại số khác nhau
Bạn có thể dùng quốc tế API để định dạng số bằng cách sử dụng Intl.NumberFormat() người xây dựng. Giống Intl.DateTimeFormat()hàm tạo này lấy một chuỗi ngôn ngữ và một đối tượng tùy chọn làm đối số.
Đối tượng tùy chọn chứa các thuộc tính kiểm soát định dạng của số. Các thuộc tính này khác nhau tùy thuộc vào quy định phong cách của số.
Định dạng số thập phân và tỷ lệ phần trăm
Bạn có thể định dạng số dưới dạng số thập phân và tỷ lệ phần trăm bằng cách sử dụng Intl.NumberFormat() hàm tạo bằng cách đặt thuộc tính kiểu thành số thập phân cho số thập phân và phần trăm cho tỷ lệ phần trăm.
Đây là một ví dụ cho thấy cách định dạng số thập phân:
const num = 123456;
const locale = getUserLocale(); const options = {
style: "decimal",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num));
Khối mã ở trên định dạng 123.456 dưới dạng số thập phân với các dấu tách nhóm (,) và hai chữ số thập phân.
Đây là một ví dụ cho thấy cách định dạng phần trăm:
const num = 123456;
const locale = getUserLocale();const options = {
style: "percent",
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num));
Khối mã ở trên thể hiện 123,456 dưới dạng phần trăm với các dấu tách nhóm.
Định dạng tiền tệ
Bạn có thể định dạng số dưới dạng đơn vị tiền tệ bằng cách đặt thuộc tính kiểu thành tiền tệ. Bạn nên đặt các tùy chọn khác bên cạnh nó, chẳng hạn như:
- tiền tệ: Một chuỗi đại diện cho mã tiền tệ ISO 4217 (chẳng hạn như “USD”, “EUR” hoặc “JPY”) để sử dụng cho định dạng. Nếu bạn không cung cấp tùy chọn này, trình định dạng sẽ chọn mã tiền tệ dựa trên ngôn ngữ của người dùng.
- tiền tệHiển thị: Thuộc tính này chỉ định cách trình duyệt sẽ hiển thị đơn vị tiền tệ. Nó có thể là biểu tượng (75 USD Mỹ), mã (75 USD Mỹ) hoặc tên (75 USD Mỹ).
Đây là một ví dụ cho thấy cách bạn có thể định dạng tiền tệ:
const num = 123456;
const locale = getUserLocale(); const options = {
style: "currency",
currency: "USD",
currencyDisplay: "code",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num));
Khối mã trên định dạng 123.456 dưới dạng tiền tệ (USD).
Đơn vị định dạng
Bạn có thể dùng Intl.NumberFormat() hàm tạo để định dạng các số có đơn vị, chẳng hạn như chiều dài, thể tích và khối lượng. Bạn có thể làm điều này bằng cách thiết lập phong cách ĐẾN đơn vị. Khi bạn đặt kiểu thành đơn vị, bạn phải chỉ định các tùy chọn sau:
- đơn vị: Thuộc tính này chỉ định đơn vị sử dụng để định dạng, chẳng hạn như “mét”, “kilôgam”, “lít”, “giây”, v.v.
- đơn vịHiển thị: Thuộc tính này chỉ định cách trình duyệt sẽ hiển thị đơn vị. Bạn có thể đặt nó thành một trong hai dài (10 lít), ngắn (10 L), hoặc chật hẹp (10l).
Đây là một ví dụ cho thấy cách bạn có thể định dạng các đơn vị:
const num = 123456;
const locale = getUserLocale();const options = {
style: "unit",
unit: "liter",
unitDisplay: "long",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num));
Khối mã ở trên định dạng số 123.456 dưới dạng đơn vị tính bằng lít.
Các lựa chọn thay thế cho API quốc tế
API quốc tế cung cấp một bộ công cụ mạnh mẽ và linh hoạt để định dạng ngày, số, tiền tệ và đơn vị trong các ứng dụng JavaScript. Nó hỗ trợ nhiều ngôn ngữ và cung cấp một cách nhất quán để định dạng dữ liệu trên các nền văn hóa và ngôn ngữ khác nhau.
Bạn có thể muốn sử dụng một thư viện thay thế, chẳng hạn như Luxon hoặc Day.js, do hỗ trợ trình duyệt cho Intl bị hạn chế. Cuối cùng, việc quyết định giữa API quốc tế hay một giải pháp thay thế tùy thuộc vào các yêu cầu và ràng buộc cụ thể của dự án của bạn.