MDN Intl.NumberFormat

前端界面顯示中，經常需要把數(shù)字轉換成貨幣（美元歐元）小數(shù)點，貨幣保留兩位小數(shù)等等操作，通常的方法是字符串拼接。現(xiàn)在有一個新的 API 可以直接進行轉換，功能很強大！

The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting.

這里可以把普通的數(shù)字，轉換成不同的貨幣和格式樣式字符串。

locale 是必傳參數(shù)（支持不同國家的數(shù)字分隔符格式）；option 是可選參數(shù)是一個對象，style，currency 可以設置貨幣符號或者精確度計算；unit 是可選參數(shù)，可以增加單位（長度單位等）

const number = 123456.789;console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); // expected output: "123.456,79 €"// the Japanese yen doesn't use a minor unit console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); // expected output: "￥123,457"// limit to three significant digits console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)); // expected output: "1,23,000"

構造器方法

Intl.NumberFormat() Creates a new NumberFormat object.

靜態(tài)方法

• Intl.NumberFormat.supportedLocalesOf()

  Returns an array containing those of the provided locales that are supported without having to fall back to the runtime’s default locale. 返回一個數(shù)組，其中包含受支持的所提供語言環(huán)境的數(shù)組，而不必回退到運行時的默認語言環(huán)境。

實例方法

• Intl.NumberFormat.prototype.format()

  Getter function that formats a number according to the locale and formatting options of this NumberFormat object. 根據語言個選項格式，返回數(shù)字對應的格式。

• Intl.NumberFormat.prototype.formatToParts()

  Returns an Array of objects representing the number string in parts that can be used for custom locale-aware formatting.

  返回一個對象數(shù)組，該對象數(shù)組表示部分數(shù)字字符串，可用于自定義區(qū)域設置格式。

• Intl.NumberFormat.prototype.resolvedOptions()

  Returns a new object with properties reflecting the locale and collation options computed during initialization of the object. 返回一個新對象，該對象的屬性反映在對象初始化期間計算出的語言環(huán)境和排序規(guī)則選項。

例子

基本使用

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.

你需要傳入一個數(shù)字，然后按照默認的配置生成轉換后的字符串。

var number = 3500;console.log(new Intl.NumberFormat().format(number)); // → '3,500' if in US English locale

Using locales

這個例子是本地化數(shù)字格式的一些變形。 為了獲取應用程序用戶界面中使用的語言格式，請確保使用locales參數(shù)指定該語言（可能還包括一些后備語言）。This example shows some of the variations in localized number formats. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument:

var number = 123456.789;// German uses comma as decimal separator and period for thousands console.log(new Intl.NumberFormat('de-DE').format(number)); // → 123.456,789// Arabic in most Arabic speaking countries uses real Arabic digits console.log(new Intl.NumberFormat('ar-EG').format(number)); // → ??????????// India uses thousands/lakh/crore separators console.log(new Intl.NumberFormat('en-IN').format(number)); // → 1,23,456.789// the nu extension key requests a numbering system, e.g. Chinese decimal console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九// when requesting a language that may not be supported, such as // Balinese, include a fallback language, in this case Indonesian console.log(new Intl.NumberFormat(['ban', 'id']).format(number)); // → 123.456,789

Using options

我們可以使用 options 增加參數(shù)

The results can be customized using the options argument:

var number = 123456.789;// request a currency format console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); // → 123.456,79 €// the Japanese yen doesn't use a minor unit console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); // → ￥123,457// limit to three significant digits 限制為三個有效數(shù)字 console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)); // → 1,23,000

Using style and unit

console.log(new Intl.NumberFormat("pt-PT", {style: 'unit',unit: "mile-per-hour" }).format(50)); // → 50 mi/hconsole.log((16).toLocaleString('en-GB', {style: "unit",unit: "liter",unitDisplay: "long" })); // → 16 litres

上面是主要的配置。實際中，我主要使用貨幣和小數(shù)點，主要是 locale 和 format 的選擇。

如果是時間計算（不是純數(shù)字），可以使用 moment 庫，具體請參考 moment 的詳細 API。

總結

以上是生活随笔為你收集整理的Intl.NumberFormat 设置数字格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。