JS Intl.NumberFormat formatToParts()

🌙
手机阅读
本文目录结构

The Intl.Numberformat.prototype.formatToParts() method allows locale-aware formatting of strings produced by NumberTimeFormat formatters.

Syntax

Intl.NumberFormat.prototype.formatToParts(number)

Parameters

number Optional

A Number constructor. A primitive type object number is created using the Number() function.“) or BigInt to format.

Return value

An Array of objects containing the formatted number in parts.

Description

The formatToParts() method is useful for custom formatting of number strings. It returns an Array of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. The structure the formatToParts() method returns, looks like this:

[
  { type: "integer", value: "3" }
  { type: "group", value: "." }
  { type: "integer", value: "500" }
]

Possible types are the following:

currency

The currency string, such as the symbols “$” and “€” or the name “Dollar”, “Euro” depending on how currencyDisplay is specified.

decimal

The decimal separator string (“.”).

fraction

The fraction number.

group

The group separator string (“,”).

infinity

The Infinity string (“∞”).

integer

The integer number.

literal

Any literal strings or whitespace in the formatted number.

minusSign

The minus sign string (“-”).

nan

The NaN string (“NaN”).

plusSign

The plus sign string (“+”).

percentSign

The percent sign string (“%”).

Examples

NumberFormat outputs localized, opaque strings that cannot be manipulated directly:

var number = 3500;

var formatter = new Intl.NumberFormat('de-DE', { 
  style: 'currency', 
  currency: 'EUR' 
});

formatter.format(number);
// "3.500,00 €"

However, in many User Interfaces there is a desire to customize the formatting of this string. The formatToParts method enables locale-aware formatting of strings produced by NumberFormat formatters by providing you the string in parts:

formatter.formatToParts(number);

// return value: 
[ 
  { type: "integer",  value: "3"   }
  { type: "group",    value: "."   }
  { type: "integer",  value: "500" }
  { type: "decimal",  value: ","   }
  { type: "fraction", value: "00"  }
  { type: "literal",  value: " "   }
  { type: "currency", value: "€"   }
]

Now the information is available separately and it can be formatted and concatenated again in a customized way. For example by using Array.prototype.map() method creates a new array with the results of calling a provided function on every element in the calling array.“), [arrow functions], a [switch statement], template literals, and Array.prototype.reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.“).

var numberString = formatter.formatToParts(number).map(({type, value}) => { 
  switch (type) {
    case 'currency': return `${value}`; 
    default : return value; 
  } 
}).reduce((string, part) => string + part);

This will make the currency bold, when using the formatToParts() method.

console.log(numberString);
// "3.500,00 €"

Polyfill

A polyfill for this feature is available in the proposal repository.

See also

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe
axihe
新版红宝书,最低44元! axihe 京东购买 / 天猫购买 / 图灵购买