Hướng dẫn dùng intl.datetimeformat JavaScript

Trong javascript, hiệp hội quốc tế ECMAScript công bố một object tên là Intl, trong đó có chứa tất cả các phương thức liên quan tới bản địa hóa (ngôn ngữ, ngày tháng, định dạng tiền tệ, vâng vâng). Cùng lướt qua API Intl.DateTimeFormat được cung cấp

Một chuỗi chuẩn ISO cho ngày tháng

const date = new Date().toISOString();

// "2020-02-05T16:30:41.392Z"

Được sử dụng trong thẻ HTML

Published on ...

Các công cụ tìm kiếm sẽ đọc các giá trị này một cách rất dễ dàng. Nhưng nếu là người bình thường chúng ta không thích như vậy, chuyển đổi qua lại giữa các định dạng theo từng khu vực là điều bắt buộc.

Pubblicato il 05 Febbraio 2020
Published on February 05, 2020

Sử dụng API để hiển thị cho dân US-UK

const options = { month: "long", day: "numeric", year: "numeric" };
const date = new Date(isoString);
const americanDate = new Intl.DateTimeFormat("en-US", options).format(date);

Để xem tài liệu đầy đủ, xem trên MDN

Bạn sẽ thấy thằng Intl.DateTimeFormat sẽ cho kết quả tương tự như toLocaleDateString

const options = { month: "long", day: "numeric", year: "numeric" };
const longDate = new Date().toLocaleDateString(locale, options);

Vậy xài cái nào?, ngắn gọn, Intl.DateTimeFormat là lựa chọn sáng suốt xét trên phương diện tốc độ

Cũng đáng nhắc đến, format() sẽ trả về ngày hiện tại nếu không truyền tham số cho nó.

new Date() hiển thị kết quả (không phải trả về) như thế này “Wed Feb 05 2020 18:46:03 GMT+0100 (Central European Standard Time)” khi gọi trong trình duyệt, cùng constructor đó gọi trong Node.js sẽ hiển thị (không phải trả về) chuỗi ISO “2020-02-05T17:47:03.065Z”

TopDev via Vuilaptrinh

Như chúng ta đã biết các quốc gia khác nhau có các quy ước khác nhau để hiển thị các giá trị. Do đó Javascript giúp ta xử lí các giá trị này dễ dàng hơn với Internationalization API.

Internationalization còn được viết gọn lại thành I18N (18 kí tự giữa i và n trong từ trên). Đây là một API cung cấp nhiều tính năng giúp ta chuyển đổi định dạng giá trị phù hợp với từng quốc gia.

Hôm nay mình xin giới thiệu tới các bạn một object hỗ trợ I18N là Intl. Chúng ta sẽ tìm hiểu object này trong bài viết nhé 😀

Intl.Collator()

Intl.Collator cho phép so sánh các chuỗi với ngôn ngữ tùy chọn.

Syntax

new Intl.Collator(locales, options)

Parameters

locales (Optional): Đối số này giúp JS xác định ngôn ngữ mà bạn đang muốn so sánh.

options (Optional):

undefined: giá trị mặc định.

locale: Một định danh ngôn ngữ, ví dụ: "en-US" - "English (United States)", "vi-VN" - "Vietnamese (Vietnam)",...

Danh sách locale: http://www.lingoes.net/en/translator/langcode.htm

list of locales: Ngoài ra Collator còn cho phép truyền một mảng các ngôn ngữ làm đối số.

Cùng đến với một vài ví dụ về cách sử dụng Intl.Collator() nhé:

console.log(Intl.Collator().compare('a', 'b')); //-1
console.log(Intl.Collator().compare('a', 'a')); // 0
console.log(Intl.Collator().compare('b', 'a')); // 1

Ở ví dụ trên, hàm compare của Intl.Collator() sẽ trả về kết quả là âm, 0 hoặc dương, tùy thuộc vào việc 'a' đứng trước 'b' trong thứ tự sắp xếp, các chuỗi bằng nhau theo thứ tự sắp xếp, hoặc trả về kết quả dương nếu 'a' đứng sau 'b' theo thứ tự sắp xếp.

Thêm ví dụ nữa các bạn để hiểu rõ hơn:

let collator = new Intl.Collator('en-US', {
    numeric: true,
    sensitivity: 'base',
});

let people = [
    {
        name: '8tupac',
        born: 1971,
    },
    {
        name: '3biggie',
        born: 1972,
    },
    {
        name: '10eminem',
        born: 1972,
    },
];

people.sort(function (a, b) {
    return collator.compare(a.name, b.name);
});

Ở ví dụ trên mình đã truyền các giá trị vào options như: numeric, sensitivity mình sẽ giải thích các giá trị này:

sensitivity:

• base: Chỉ các chuỗi có chữ cái cơ bản khác nhau sẽ được tính là không bằng nhau. Ví dụ: a ≠ b, a = á, a = A.
• accent: Chỉ các chuỗi có chữ cái cơ bản và dấu khác nhau sẽ được tính là không bằng nhau. Ví dụ: a ≠ b, a ≠ á, a = A.
• case: Chỉ các chuỗi có chữ cái cơ bản hoặc chữ hoa, chữ thường được so sánh là không bằng nhau. Ví dụ: a ≠ b, a = á, a ≠ A.
• variant: Các chuỗi khác nhau về chữ cái cơ bản, dấu trọng âm và các dấu phụ khác hoặc so sánh chữ hoa, chữ thường là không bằng nhau. Ví dụ: a ≠ b, a ≠ á, a ≠ A.

Các bạn lưu ý: Trong một số ngôn ngữ, có một số chữ cái, dấu phụ được coi là chữ cái cơ bản.

numeric: kiểu boolean true hoặc false nếu giá trị là true sẽ thực hiện sắp xếp số nếu trong chuỗi có chứa số.

🎉 Cuối cùng kết quả trả về sẽ là:

[
  0: {name: "3biggie", born: 1972}
  1: {name: "8tupac", born: 1971}
  2: {name: "10eminem", born: 1972}
]

Intl.DateTimeFormat()

Intl.DateTimeFormat() cho phép chúng ta định dạng ngày tháng khá dễ dàng 👏.

const data = Intl.DateTimeFormat('vi-VN', {
    dateStyle: 'full',
    timeStyle: 'medium',
}).format(Date.now());

//result: 09:32:31 Thứ Tư, 1 tháng 9, 2021

Parameters

locales (Optional): Ở phần Intl.Collator() mình đã trình bày về parameter này.

options (Optional):

Khi sử dụng dateStyle hoặc timeStyle ta không được dùng các options khác như weekday, hour, month,...

Ví dụ khi sử dụng Intl.DateTimeFormat():

const data = Intl.DateTimeFormat('vi-VN', {
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    year: 'numeric',
    timeZone: 'Asia/Ho_Chi_Minh',
}).format(Date.now()); // Thứ Tư, 1 tháng 9, 2021

const data = Intl.DateTimeFormat('en-US', {
    month: '2-digit',
    day: '2-digit',
    weekday: 'long',
    year: 'numeric',
    timeZone: 'Asia/Ho_Chi_Minh',
}).format(Date.now()); // Wednesday, 09/01/2021

Danh sách timezones cho bạn nào cần: http://worldtimeapi.org/timezones

Intl.NumberFormat()

😀 Tiếp theo chúng ta đến với phần định dạng số với Intl.NumberFormat().

Với một số website bán hàng chúng ta có thể sử dụng constructor này để định dạng tiền tệ với các đơn vị tùy ý.

console.log(
    new Intl.NumberFormat('vi', {
        style: 'currency',
        currency: 'VND',
        minimumFractionDigits: 2,
        maximumFractionDigits: 3,
    }).format(222.1234) //222,123 ₫
);

options (Optional):

minimumFractionDigits: Số lượng số tối thiểu sau dấu phân cách.

maximumFractionDigits: Số lượng số tối đa sau dấu phân cách.

currency: Đơn vị tiền tệ. Thảm khảo tại đây.

style: values: 'percent', 'currency', 'unit', 'decimal'.

Một số ví dụ:

const number = 0.0875;
new Intl.NumberFormat('en-US', { style: 'decimal' }).format(number);
// → '0.088'
new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 1}).format(number);
// → '8.8%'

Như vậy là mình đã giới thiệu cho các bạn một số các constructor thường dùng của Intl. Hi vọng bài viết này có thể giúp bạn hiểu được phần nào về Intl trong JavaScript.

Các bạn có thể đọc thêm một số bài viết về Intl:

https://tc39.es/ecma402/

https://blog.logrocket.com/getting-to-know-the-intl-api-in-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

Chúc các bạn học tốt 🔥.