Tìm hiểu về Intl.RelativeTimeFormat trong JavaScript

215

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam

Nếu bạn đang định xây dựng tính năng để tính toán khoảng thời gian tương đối (như “sau 3 ngày nữa”, “4 tháng trước”, “1 phút trước”) mà không cần sử dụng thư viện bên ngoài?

Trong bài viết này, chúng ta sẽ tìm hiểu về Intl.RelativeTimeFormat, một tính năng để định dạng thời gian tương đối (hỗ trợ nhiều ngôn ngữ) trong JavaScript.

I. Giới thiệu về Intl.RelativeTimeFormat

Intl.RelativeTimeFormat là một phần của bộ công cụ quốc tế hóa (i18n – Internationalization) trong JavaScript. Nó cho phép bạn định dạng các khoảng thời gian tương đối (như “sau 3 ngày nữa”, “4 tháng trước”, “1 phút trước”) một cách dễ dàng và chính xác. Đặc biệt nó có hỗ trợ hiển thị nhiều ngôn ngữ khác nhau và bạn cũng không cần sử dụng thư viện bên ngoài để xử lý.

Tại sao nên sử dụng Intl.RelativeTimeFormat?

  1. Hỗ trợ đa ngôn ngữ: Intl.RelativeTimeFormat hỗ trợ nhiều ngôn ngữ (bao gồm cả tiếng việt).
  2. Đơn giản và dễ sử dụng: Đối tượng này cung cấp các phương thức để định dạng thời gian tương đối mà không cần phải tự viết các chức năng phức tạp.
  3. Đảm bảo tính chính xác: Định dạng chính xác và phù hợp với ngữ cảnh văn hóa của từng ngôn ngữ.

II. Cách sử dụng Intl.RelativeTimeFormat

⚡️ Tạo đối tượng Intl.RelativeTimeFormat

Để sử dụng Intl.RelativeTimeFormat, bạn cần tạo một đối tượng mới từ lớp này. Dưới đây là cú pháp cơ bản:

const rtf = new Intl.RelativeTimeFormat('vi', { numeric: 'auto' });
  • 'vi' là mã ngôn ngữ dành cho tiếng Việt.
  • { numeric: 'auto' } là một tùy chọn định dạng, cho phép tự động chuyển đổi giữa dạng số và dạng từ (vd: “trong 1 ngày” thay vì “trong một ngày”).

⚡️ Định dạng thời gian tương đối

Dưới đây là cách sử dụng đối tượng Intl.RelativeTimeFormat để định dạng thời gian tương đối:

console.log(rtf.format(-1, 'day')); // "1 ngày trước"
console.log(rtf.format(0, 'seconds')); // "bây giờ"
console.log(rtf.format(5, 'minute')); // "sau 5 phút"

❗️ Chú ý: dấu “-” thể hiện thời gian ở quá khứ. Khi bằng 0 là thời gian hiện tại, lớn hơn 0 là tương lai.

  Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript

  Hằng số và tính bất biến trong JavaScript

III. Các tùy chọn định dạng

Intl.RelativeTimeFormat cung cấp một số tùy chọn để tùy chỉnh định dạng thời gian tương đối:

  1. numeric: Chấp nhận hai giá trị 'always' và 'auto'.
    • 'always' sẽ luôn sử dụng dạng số (vd: “trong 1 ngày”).
    • 'auto' sẽ tự động chuyển đổi giữa dạng số và dạng từ (vd: “ngày mai” thay vì “sau 1 ngày”).
  2. style: Chấp nhận các giá trị 'long', 'short', và 'narrow'. (Lưu ý: kết quả trả về có thể giống nhau nếu không có từ phù hợp của ngôn ngữ đó)
    • 'long': Định dạng đầy đủ (vd: “1 day ago”).
    • 'short': Định dạng ngắn gọn (vd: “1 day ago”).
    • 'narrow': Định dạng tối giản (vd: “1d ago”).

Ví dụ với các tùy chọn khác nhau

const rtfLong = new Intl.RelativeTimeFormat('en', { style: 'long' });
const rtfShort = new Intl.RelativeTimeFormat('en', { style: 'short' });
const rtfNarrow = new Intl.RelativeTimeFormat('en', { style: 'narrow' });

console.log(rtfLong.format(-1, 'day')); // "1 day ago"
console.log(rtfShort.format(-1, 'day')); // "1 day ago"
console.log(rtfNarrow.format(-1, 'day')); // "1d ago"

IV. Các đơn vị thời gian được hỗ trợ

Intl.RelativeTimeFormat hỗ trợ nhiều đơn vị thời gian khác nhau bao gồm:

  • second (giây)
  • minute (phút)
  • hour (giờ)
  • day (ngày)
  • week (tuần)
  • month (tháng)
  • quarter (quý)
  • year (năm)

Ví dụ về các đơn vị thời gian

console.log(rtf.format(-30, 'second')); // "30 giây trước"
console.log(rtf.format(2, 'week')); // "sau 2 tuần nữa"

V. Kết hợp tuỳ chọn

Bạn có thể kết hợp các tùy chọn để đạt được định dạng mong muốn cho từng ngữ cảnh, ngôn ngữ cụ thể.

VD: Bạn có thể kết hợp nhiều tùy chọn để đạt được kết quả mong muốn:

const rtfCustom = new Intl.RelativeTimeFormat('vi', {
  numeric: 'auto',
  style: 'long'
});

console.log(rtfCustom.format(-3, 'month')); // "3 tháng trước"
console.log(rtfCustom.format(1, 'year')); // "năm sau"

VI. FAQs

Một số câu hỏi thường gặp khi sử dụng Intl.RelativeTimeFormat (FAQs)

  1. Intl.RelativeTimeFormat là gì? Intl.RelativeTimeFormat là một API trong JavaScript cho phép định dạng thời gian tương đối cho nhiều ngôn ngữ khác nhau.
  2. Làm thế nào để tạo đối tượng Intl.RelativeTimeFormat? Bạn có thể tạo đối tượng bằng cách sử dụng cú pháp new Intl.RelativeTimeFormat('vi', { numeric: 'auto' }).
  3. Có thể sử dụng Intl.RelativeTimeFormat cho những đơn vị thời gian nào? Intl.RelativeTimeFormat hỗ trợ các đơn vị thời gian như giây, phút, giờ, ngày, tuần, tháng, quý, và năm.
  4. Các tùy chọn định dạng của Intl.RelativeTimeFormat là gì? Các tùy chọn bao gồm numeric (always, auto) và style (long, short, narrow).
  5. Có thể kết hợp nhiều tùy chọn khi sử dụng Intl.RelativeTimeFormat không? Có, bạn có thể kết hợp các tùy chọn để đạt được định dạng mong muốn cho từng ngữ cảnh cụ thể.

VII. Kết luận

Intl.RelativeTimeFormat là một công cụ mạnh mẽ và dễ sử dụng để định dạng thời gian tương đối trong JavaScript. Bằng cách hỗ trợ nhiều ngôn ngữ và cung cấp các tùy chọn định dạng linh hoạt, nó giúp việc quốc tế hóa ứng dụng của bạn trở nên dễ dàng hơn. Hãy thử áp dụng Intl.RelativeTimeFormat vào dự án của bạn và trải nghiệm sự tiện lợi mà nó mang lại!

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng Intl.RelativeTimeFormat trong JavaScript.

Bài viết gốc được đăng tải tại blog.thanhnamnguyen.dev

Xem thêm:

Tìm việc làm IT mới nhất trên TopDev

RELATED ARTICLESMORE FROM AUTHOR