Intl.NumberFormat.prototype.formatToParts()
Intl.NumberFormat
实例的 formatToParts()
方法允许对此 Intl.NumberFormat
对象生成的字符串进行区域设置感知格式设置。
¥The formatToParts()
method of Intl.NumberFormat
instances allows locale-aware formatting of strings produced by this Intl.NumberFormat
object.
Try it
语法
参数
返回值
描述
¥Description
formatToParts()
方法对于数字字符串的自定义格式很有用。它返回 Array
个对象,其中包含特定于区域设置的标记,可以从中构建自定义字符串,同时保留特定于区域设置的部分。formatToParts()
方法返回的结构如下所示:
¥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:
compact
-
"long"
或"short"
形式的指数,具体取决于当notation
设置为compact
时如何指定compactDisplay
(默认为short
)。 currency
-
货币字符串,例如符号 "$" 和 "€" 或名称 "美元"、"欧元",具体取决于
currencyDisplay
的指定方式。 decimal
-
小数点分隔符字符串 (".")。
exponentInteger
-
当
notation
设置为scientific
或engineering
时,指数整数值。 exponentMinusSign
-
指数减号字符串 ("*")。
exponentSeparator
-
当
notation
设置为scientific
或engineering
时,指数分隔符。 fraction
-
分数。
group
-
组分隔符字符串 (",")。
infinity
-
Infinity
字符串 ("∞")。 integer
-
整数。
literal
-
格式化数字中的任何文字字符串或空格。
minusSign
-
减号字符串 ("*")。
nan
-
NaN
字符串 ("NaN")。 plusSign
-
加号字符串 ("*")。
percentSign
-
百分号字符串 ("%")。
unit
-
单位字符串,例如 "l" 或 "litres",具体取决于
unitDisplay
的指定方式。 unknown
-
unknown
类型结果的字符串。
示例
比较 format 和 formatToParts
¥Comparing format and formatToParts
NumberFormat
输出无法直接操作的本地化、不透明字符串:
¥NumberFormat
outputs localized, opaque strings that cannot be manipulated
directly:
const number = 3500;
const formatter = new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR",
});
formatter.format(number);
// "3.500,00 €"
然而,在许多用户界面中都希望自定义该字符串的格式。formatToParts
方法通过为你提供部分字符串来启用 NumberFormat
格式化程序生成的字符串的区域设置感知格式:
¥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: "€" },
];
现在,这些信息可以单独使用,并且可以以自定义方式再次格式化和连接。例如,使用 Array.prototype.map()
、箭头函数、switch 语句、模板文字 和 Array.prototype.reduce()
。
¥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()
,
arrow functions,
a switch statement,
template literals, and Array.prototype.reduce()
.
const numberString = formatter
.formatToParts(number)
.map(({ type, value }) => {
switch (type) {
case "currency":
return `<strong>${value}</strong>`;
default:
return value;
}
})
.reduce((string, part) => string + part);
使用 formatToParts()
方法时,这将使货币变为粗体。
¥This will make the currency bold, when using the formatToParts()
method.
console.log(numberString);
// "3.500,00 <strong>€</strong>"
规范
Specification |
---|
ECMAScript Internationalization API Specification # sec-intl.numberformat.prototype.formattoparts |
浏览器兼容性
BCD tables only load in the browser