Intl trong JavaScript là gì? Cách sử dụng Intl thông qua ví dụ

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 🔥.