[譯] 前端國際化利器 - Intl

揭曉新的 Intl 對象如何將數據格式化爲特定的語言

原文連接： New Intl APIs in JavaScriptjavascript

Intl 是一個全局對象，它的主要用途就是展現國際化信息，能夠將字符串，數字和日期和時間轉換爲指定地區的格式。java

國際化是應用程序中用來適應各類語言和區域而無需進行編碼的一種方式。api

JavaScript 開發者無需在代碼包中加入數以 KB 計的翻譯文件。 Intl 有各類構造函數和方法，這些構造函數和方法將 locale 做爲參數並能夠根據您的須要格式化數據。下面是 Intl 的構成：數組

Collator，DateTimeFormat，ListFormat，NumberFormat，PluralRules，RelativeTimeFormat是命名空間 Intl 中的構造函數。它們接受兩個參數 - locales 和 options。 locale 必須是符合 BCP 47 語言標記規範的字符串或數組。若是您有興趣瞭解有關 BCP 47 語言標籤的更多信息，請參閱 MDN 的摘錄：bash

BCP 47 語言標記用於定義一種語言，它包含了該語言的主要信息。在正常狀況下，它按順序包含：語言代碼，腳本代碼和國家或地區代碼，這些信息都用連字符分隔。雖然這些標籤不區分大小寫，但建議用標題大小寫來寫腳本代碼，用大寫來寫國家和地區代碼，用小寫來寫其餘內容。markdown

locale 參數的默認值爲運行時的語言環境。語言環境通常寫成這樣 - en（英語），hi（印地語），ta-in（泰米爾語 - 印度）。 options 參數是可選的，其結構因不一樣的構造函數而異，主要用於提供格式化的自定義參數。函數

在本文中，咱們將介紹在命名空間 Intl 中添加的一些新 API。這些新 API 已經在 Google I/O '19 中公佈。下面讓咱們來詳細瞭解一下這些 API。oop

Intl.RelativeTimeFormat

RelativeTimeFormat 構造函數用於將時間戳轉換爲人性化短語。它將可讀性差的日期對象轉換爲其相對當前時間字符串。讓咱們來看下面這個栗子：編碼

上面的栗子中，Intl.RelativeTimeFormat 構造函數的第一個參數爲 en 。配置項 options 中的 numeric 可能取值 always 或 auto ---- 其中 always 不會將數字格式化爲短語，舉個栗子：spa

rtf.format(-1, 'month') 會格式化爲 1 month ago。

若是您想將他們格式化爲泰語，能夠像下圖這樣傳參：

Intl.RelativeTimeFormat 構造函數 with ta-in locale

像昨天、今天、明天這樣的短語能夠給用戶提供更好的可讀性！相關功能可在 Chrome 71 和 FireFox 65 以上版本體驗。

Intl.ListFormat

ListFormat 構造函數用於把字符串鏈接成有意義的短語。

format 方法能夠很好地鏈接 characters 數組中的字符串。若是不使用 ListFormat API，咱們必須編寫函數來把 , 和 and 插入適當的位置。

咱們能夠經過更改 options 中的配置項來自定義格式化的內容：

將 type 設置爲 disjunction 會使用 or 來鏈接字符串。下面是 options 的一些屬性的可選值：

type：可選值爲 conjunction，disjunction 和 unit，其中 conjunction 爲默認值， unit 類型用於不須要鏈接詞的狀況，以下圖：

style: 可選值爲 long and short (或者 narrow)

ListFormat API 在 Chrome 72 以上版本可體驗。

Intl.NumberFormat

與其餘高級語言不一樣，JavaScript 爲變量的數據類型提供了靈活性。 int、float、string 或 object 都是使用 var 聲明的（let 和 const 用於塊級做用域）。

可是咱們怎麼才能肯定一個數字有多大？

123456789123456789 * 11 // Prints 1358024680358024700
複製代碼

上述操做結果的單位不該該爲0！看起來咱們須要爲大數作點額外的操做。好消息是，咱們已經有 BigInt 用於處理大數。讓咱們使用 BigInt 來再試一遍：

123456789123456789n * 11n // Prints 1358024680358024679n
複製代碼

如今看起來正常多了！

大數的可讀性通常都比較差。這種狀況下咱們可能須要用到 Intl.NumberFormat API！它用於經過添加特定於語言環境的數字分隔符來格式化數字。讓咱們看看它的效果：

數字格式化會根據你的區域設置而不一樣。設置爲 en 時使用逗號分隔符，設置爲 fr 時使用空格分隔。

咱們能夠經過更改 options 對象中的配置項來自定義格式化的內容。 options 上的一些參數的可選值以下：

style: 可選值爲 decimal, currency, 和 percent ，默認值爲 decimal

currency: 用於指訂貨幣樣式。例如: USD, INR

currencyDisplay: 可選值爲 symbol and code ，默認值爲 symbol

你能夠點擊這裏查看全部的可配置項。

Intl.NumberFormat 如今在 Chrome、 FireFox 和 Safari 中可用。

列表中還有一個更使人興奮的 API：Intl.DateTimeFormat

Intl.DateTimeFormat

Intl.DateTimeFormat API 用於將日期和時間格式化爲指定語言的格式。這個 API 上的新方法 formatRange ，能夠像下面這樣使用：

const df = new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
})
const startDate = new Date('01-06-2019')
const endDate = new Date('10-06-2019')
df.formatRange(startDate, endDate) // Prints Jun 1-10 2019
複製代碼

注意：formatRange 函數會將同一個月的日期組合在一塊兒展現。

使用這個 API 後，您就能夠從代碼中刪除僅用於格式化日期範圍的方法！

options 中有許多配置項，例如 timeZone，era，year，month，day，hour，minute，second等等。

結語

本文介紹了新增 API Intl 的一些內容：

1.Intl.RelativeTimeFormat API可用於爲時間戳生成相對於當前時間的人性化短語。

2.Intl.ListFormat API可用於使用 conjunction，disjunction和unit 參數把數組元素鏈接成短語。

3.Intl.NumberFormat可用於使用將大數格式化爲指定的語言格式。

4.Intl.DateTimeFormat API上的 formatRange 方法可用於生成時間範圍的字符串。

歡迎轉載，記得註明做者和來源哦~~