Quốc tế hóa JavaScript

Tìm hiểu cách làm việc với quốc tế hóa trong JavaScript

Intllà một đối tượng mạnh mẽ cho thấyAPI quốc tế hóa JavaScript.

Nó cho thấy các thuộc tính sau:

  • Intl.Collator: cung cấp cho bạn quyền truy cập vào so sánh chuỗi phân biệt ngôn ngữ
  • Intl.DateTimeFormat: cung cấp cho bạn quyền truy cập vào định dạng ngày và giờ nhạy cảm với ngôn ngữ
  • Intl.NumberFormat: cung cấp cho bạn quyền truy cập vào định dạng số nhạy cảm với ngôn ngữ
  • Intl.PluralRules: cung cấp cho bạn quyền truy cập vào các quy tắc định dạng số nhiều và ngôn ngữ số nhiều nhạy cảm với ngôn ngữ
  • Intl.RelativeTimeFormat: cung cấp cho bạn quyền truy cập vào định dạng thời gian tương đối nhạy cảm với ngôn ngữ

Nó cũng cung cấp một phương pháp:Intl.getCanonicalLocales().

Intl.getCanonicalLocales()cho phép bạn kiểm tra xem một ngôn ngữ có hợp lệ hay không và trả về định dạng chính xác cho ngôn ngữ đó. Nó có thể chấp nhận một chuỗi hoặc một mảng:

Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]

và thông báo lỗi nếu ngôn ngữ không hợp lệ

Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it

mà bạn có thể bắt được bằng khối thử / bắt.

Các loại khác nhau có thể giao tiếp với Intl API cho các nhu cầu cụ thể của chúng. Đặc biệt chúng ta có thể kể đến:

  • String.prototype.localeCompare()
  • Number.prototype.toLocaleString()
  • Date.prototype.toLocaleString()
  • Date.prototype.toLocaleDateString()
  • Date.prototype.toLocaleTimeString()

Hãy cùng xem cách làm việc với các thuộc tính Intl ở trên:

Intl.Collator

Thuộc tính này cung cấp cho bạn quyền truy cập vào so sánh chuỗi phân biệt ngôn ngữ

Bạn khởi tạo một đối tượng Collator bằng cách sử dụngnew Intl.Collator(), chuyển cho nó một ngôn ngữ và bạn sử dụngcompare()phương thức trả về giá trị dương nếu đối số đầu tiên đứng sau đối số thứ hai. Một số âm nếu nó ngược lại và bằng 0 nếu nó có cùng giá trị:

const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value

Ví dụ, chúng ta có thể sử dụng nó để sắp xếp các mảng ký tự.

Intl.DateTimeFormat

Thuộc tính này cung cấp cho bạn quyền truy cập vào định dạng ngày và giờ nhạy cảm với ngôn ngữ.

Bạn khởi tạo một đối tượng DateTimeFormat bằng cách sử dụngnew Intl.DateTimeFormat(), chuyển cho nó một ngôn ngữ, và sau đó bạn chuyển cho nó một ngày để định dạng nó theo ngôn ngữ đó thích:

const date = new Date()
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')
dateTimeFormatter.format(date) //27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB')
dateTimeFormatter.format(date) //27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) //1/27/2019

Phương thức formatToParts () trả về một mảng có tất cả các phần ngày tháng:

const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.formatToParts(date)
/*
[ { type: 'month', value: '1' },
  { type: 'literal', value: '/' },
  { type: 'day', value: '27' },
  { type: 'literal', value: '/' },
  { type: 'year', value: '2019' } ]
*/

Bạn cũng có thể in thời gian. Kiểm tra tất cả các tùy chọn bạn có thể sử dụngtrên MDN.

Intl.NumberFormat

Thuộc tính này cho phép bạn truy cập vào định dạng số nhạy cảm với ngôn ngữ. Bạn có thể sử dụng nó để định dạng một số dưới dạng giá trị tiền tệ.

Giả sử bạn có một số như10, và nó đại diện cho giá của một thứ gì đó.

Bạn muốn chuyển đổi nó thành$10,00.

Nếu số có nhiều hơn 3 chữ số, tuy nhiên, nó phải được hiển thị theo cách khác, ví dụ:1000nên được hiển thị dưới dạng$1.000,00

Tuy nhiên, đây là USD.

Các quốc gia khác nhau có các quy ước khác nhau để hiển thị các giá trị.

JavaScript giúp chúng tôi rất dễ dàng vớiAPI quốc tế hóa ECMAScript, một API trình duyệt tương đối gần đây cung cấp nhiều tính năng quốc tế hóa, như định dạng ngày và giờ.

Nó được hỗ trợ rất tốt:

Browser support for the internationalization API

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // “$1,000.00” formatter.format(10) // “$10.00” formatter.format(123233000) // “$123,233,000.00”

CácminimumFractionDigitsthuộc tính đặt phần phân số luôn có ít nhất 2 chữ số. Bạn có thể kiểm tra các thông số khác mà bạn có thể sử dụng trongtrang NumberFormat MDN.

Ví dụ này tạo một định dạng số cho đơn vị tiền tệ Euro, cho quốc gia Ý:

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

Intl.PluralRules

Thuộc tính này cung cấp cho bạn quyền truy cập vào các quy tắc định dạng số nhiều và ngôn ngữ số nhiều nhạy cảm với ngôn ngữ. tôi đã tìm thấyví dụ trên cổng Google Developers của Mathias Bynensngười duy nhất tôi có thể liên quan đến cách sử dụng thực tế: đặt hậu tố cho các số có thứ tự: 0th, 1, 2, 3, 4, 5. ..

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

Mỗi khi chúng tôi cóother, chúng tôi dịch điều đó sangth. Nếu chúng ta cóone, chúng tôi sử dụngst. Đối vớitwochúng tôi sử dụngnd.fewđượcrd.

Chúng ta có thể sử dụng một đối tượng để tạo một mảng kết hợp:

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

và chúng tôi thực hiện một hàm định dạng để tham chiếu giá trị trong đối tượng và chúng tôi trả về một chuỗi chứa số gốc và hậu tố của nó:

const format = (number) => `${number}${suffixes[pr.select(number)]}`

Bây giờ chúng ta có thể sử dụng nó như thế này:

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

Xin lưu ý rằng có những điều tốt đẹp sắp ra mắt với Intl, nhưIntl.RelativeTimeFormatIntl.ListFormat, hiện chỉ có trong Chrome và Opera.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: