Cách dùng Intl API trong JavaScript

Tiếp cận khán giả rộng hơn bằng cách hướng nội dung tới ngôn ngữ bất kỳ bằng Intl API. Dưới đây là cách dùng Intl API trong JavaScript.

Intl API đơn giản hóa định dạng và thao tác vớivă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 khó khăn trong định dạng dữ liệu cho các nền văn hóa và ngôn ngữ khác nhau. Nó khiến việc định dạng số với biểu tượng tiền tệ hay ngày tháng dễ dàng hơn theo vùng cụ thể.

Sử dụng Intl API, bạn có thể tạo các ứng dụng web có thể truy cập và dễ dùng cho người xem ở các vùng miền và nền văn hóa khác nhau.

Lấy ngôn ngữ 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 hàm tạo lấy một ngôn ngữ và một đối tượng tùy chọn 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ữ hiện đang được hỗ trợ.

Để lấy ngôn ngữ của người dùng, bạn có thể dùng thuộc tính navigator.language. 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 thuộc tính navigator.language là thẻ ngôn ngữ BCP 47. Nó chứa một mã ngôn ngữ và mã vùng (tùy chọn) cùng các tag phụ khác. Ví dụ, “en-US” đại diện cho tiếng Anh được nói ở Mỹ.

Bạn cũng có thể dùng thuộc tính navigator.languages để lấy một mảng ngôn người dùng yêu thích, rồi phân loại chúng theo thứ tự ưu tiên. Mục đầu tiên trong mảng đại diện cho cấu hình ngôn ngữ chính.

Bạn có thể tạo một hàm JavaScript đơn giản nhằm giúp bạn lấy ngôn ngữ của người dùng. Đây là đoạn code mẫu:

const getUserLocale = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  }
  return navigator.language;
};

console.log(getUserLocale());

Hàm getUserLocale trả về nhân tố đầu tiên của thuộc tính navigator.languages nếu nó có sẵn. 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 tháng cho các ngôn ngữ khác nhau

Định dạng ngày tháng bằng Intl API, bạn có thể dùng hàm tạo Intl.DateTimeFormat(). Nó 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 thuộc tính kiểm soát định dạng ngày tháng.

Một số lựa chọn phổ biến bao gồm:

• Weekday: Định dạng ngày trong tuần.
• Year: Định dạng năm.
• Month: Định dạng tháng.
• Day: Định dạng ngày.

Ví dụ cách định dạng ngày tháng bằng hàm khởi tạo Intl.DateTimeFormat():

const date = Date.now()
const locale = getUserLocale();

const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

const formatter = new Intl.DateTimeFormat(locale, options);

// weekday, month date, year (Friday, March 24, 2023)
console.log(formatter.format(date));

Code này thiết lập một đối tượng trình định dạng bằng cách chuyển ngôn ngữ của người dùng sang Intl.DateTimeFormat(), cùng với một nhóm các lựa chọn. Sau đó, nó dùng trình định dạng để biến ngày tháng hiện tại thành một chuỗi. Đối tượng options chứa các thuộc tính kiểm soát định dạng của ngày tháng.

Trên đây là cách dùng Intl API trong JavaScript. Hi vọng bài viết hữu ích với các bạn.