js格式化金额_Intl.NumberFormat用法

更新日期: 2021-10-21阅读: 2.2k标签: 数字

Intl.NumberFormat可以根据不同语言环境对数值进行不同的格式化处理。当然Number.prototype.toLocaleString也可以对数字进行一定格式的处理,但Intl.NumberFormat是更好的选择,因为它使创建这往往是一个可重复使用的格式实例更有效。比如:输入一串数字,然后对其进行金额格式化:

  • 用 逗号 分隔(三位一逗号)
  • 保留 2 位小数点 ,数不足补 0
  • 四舍五入
  • 要加金额符号 $


代码实现:

var number = 123456.789;
var result = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number);
console.log(result); // $123,456.79

Intl.NumberFormat 是对是启用语言敏感 数字格式 的对象的构造函数
locales:

(可选)缩写语言代码 (BCP 47 language tag,例如:cmn-Hans-CN) 的字符串或者这些字符串组成的数组。
style:

指定数字的格式样式。

含义
decimal纯数字格式 (默认值)
currency货币格式
percen百分比格式

currency:

在货币格式化中使用的货币符号。 可能的值是 ISO 的货币代码 (the ISO 4217 currency codes) 。没有默认值,如果样式是 “currency”,必须提供货币属性。

含义
USD美元
EUR欧元
CNY人民币

useGrouping:

是否使用分组分隔符。如千位分隔符或千/万/亿分隔符,可能的值是 true 和 false ,默认值是 true。


常见应用背景

打开你手机相关应用软件(支付宝、微信、银行...),含金额1000以上方可看到这个金额以,分割,即三位分节法;下面看看在JavaScript中如何将其输出。

const formatter = new Intl.NumberFormat();
formatter.format(1000)
// 则会输出:"1,000"
formatter.format(1000.5934)
// 输出:"1,000.593"
formatter.format(1000.5956)
// 输出:"1,000.596"

同时也可以输出其组成元素。

formatter.formatToParts(1000)
// 则输出:
// [
//  {type: "integer", value: "1"},
//  {type: "group", value: ","},
//  {type: "integer", value: "000"}
// ]

另外也可以将其输出为中文十进制数字,如:

const formatter = new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec');
const res = formatter.format(8848.86);
// 输出:八,八四八.八六

类型单位

  • 角度: degree
  • 面积: acre, hectare
  • 百分比: percent
  • 字节: bit, byte, kilobit, kilobyte, megabit, megabyte, gigabit, gigabyte, terabit, terabyte, petabyte
  • 时间类长度: millisecond, second, minute, hour, day, week, month, year
  • 长度或高度或深度: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile, mile-scandinavian
  • 质量:gram, kilogram, ounce, pound, stone
  • 温度: celsius, fahrenheit
  • 容积: liter, milliliter, gallon, fluid-ounce

长度表示

如我们所知的世界最高峰 - 珠穆朗玛峰 (其最新高度8848.86米)。若动态返回数据为8848.86,那么前端人员需要将其输出为8,848.86米。

世界第一高峰: 珠穆朗玛峰 (高度:8848.86米)
const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'meter',
});
const res = formatter.format(8848.86);
// 则输出:8,848.86米
// 若语言设置为'en',则输出:8,848.86m

当然在高度或长度方面还存在别的单位,如:毫米、厘米、千米等等(millimeter,centimeter,meter,kilometer,inch,foot,yard,mile,mile-scandinavian)。

字节单位表示

kB、MB、Gb、Tb这几个单位在日常生活中也是常见的。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'megabyte',
});
const res = formatter.format(1024);
// 则输出:1,024 MB

// 其他
// ...
// 若unit设置"gigabit",则:1,024 Gb
// 若unit设置"terabit",则:1,024 Tb
// ...

其他单位输出可以设置:bit,byte,kilobit,kilobyte,megabit,megabyte,gigabit,gigabyte,terabit,terabyte,petabyte。

复合单位表示

单位连接组合,如:'40 小时/周' (每周工作40小时)。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'hour-per-week',
});
const res = formatter.format(40);
// 中文输出:40小时/周
// 英文输出:40 hr/w

unit 由 hour与week组合而成的单位,同样还有km/h(千米/小时: km/h),就可以设置unit为:'kilometer-per-hour'。还有常见的当前网速,每秒多少兆,设置 'megabyte-per-second'(5MB/秒);

百分比表示

常见统计类数据将会以百分比表示;如成功率占据95%,则可设置unit为percent即可。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'percent',
  // signDisplay: 'always',
  // signDisplay: 'exceptZero',
});
const res = formatter.format(95);
// 则输出:95%
// 设置 signDisplay: 'always',则输出:+95% 或 -95%

在某些情况下(例如显示增量),即使数字为正数,也有助于显式显示符号,如:+95%或-95%。可设置signDisplay: 'always'即可。排除输出+0%或-0%时设置signDisplay: 'exceptZero'即可。

货币表示

例如输出人民币5000000(500万)。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  // 输出人民币
  currency: 'CNY',
  // 输出美元,语言设置为'en'
  // currency: 'USD',
  // currencySign选项启用记帐格式
  currencySign: 'accounting',
});
const res = formatter.format(5000000);
//输出结果:¥5,000,000.00
// 其他
// 人民币:输出结果:¥5,000,000.00
// 美元:输出结果:$5,000,000.00

同样以英文输出美元,设置其语言项与货币类型即可。如人民币CNY,美元USD,欧元EUR等等。

质量表示

例如:输出500克;千克设置'kilogram'即可。

一颗苹果重0.25kg
const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'gram',
});
const res = formatter.format(500);
// 输出 500 g

更多单位如: gram, kilogram, ounce, pound, stone。

温度表示

例如:今天气温在28度。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'celsius',
});
const res = formatter.format(28);
// 输出:28°C

更多单位选择 celsius, fahrenheit。

容积表示

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'milliliter',
});
const res = formatter.format(28);
// 中文输出:28毫升
// 英文输出:28 mL

更多单位选择 liter(升),milliliter(毫升),gallon(加仑),fluid-ounce(液盎司)。

角度表示

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'degree',
});
const res = formatter.format(90);
// 输出:90°

大数字表示

如:中国大陆有14多亿人,那该如何表示,1400000000这样显示看起来有点费劲,在中文里,我们可以表示14亿。

const formatter = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
});
const res = formatter.format(1400000000);
// 输出:14亿
formatter.format(1400000);
// 输出:140万
formatter.format(140000);
// 输出:14万
formatter.format(14000);
// 输出:1.4万
formatter.format(1400);
// 输出:1400
//...

链接: https://fly63.com/article/detial/10752

Js对数字类型的支持

由于 JavaScript 采用 IEEE 754 标准,数值存储为64位双精度格式,数值精度最多可以达到 53 个二进制位(1 个隐藏位与 52 个有效位)。如果数值的精度超过这个限度,第54位及后面的位就会被丢弃.

JS实现数字金额转大写金额

由于js的弱精度,在计算小数相加时总是会丢失精度,JS将金额数字转大写的方法封装,数字大写对照表;下面为大家整理些常用的实现方法。

JS判断值是否是数字

isNaN()的缺点就在于 null、空格以及空串会被按照0来处理;对于空数组和只有一个数值成员的数组,isNaN返回false。校验只要是数字(包含正负整数,0以及正负浮点数)就返回true

Js浮点型数字误差引发的问题

JavaScript 中浮点型精度的误差,是非常基础但是却又经常不被重视的问题。文中分享的方案,足以覆盖项目中的所有情况,但如果用在其它地方或项目中,在一些极端情况下可能会有问题。

vue限制文本框输入数字的正确姿势

最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。

JS数字精度

最近在看计算机组成原理的浮点数部分,突然想起之前看过的一道快手面试题,为什么JS中0.1+0.2不等于0.3,应该如何解决?这里我们可以借这道题来说一下JS的精度问题

Js中的无穷数(Infinity)

Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道 Infinity, 我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看 JS 中的Infinity 属性,了解用例并解决一些常见的陷阱。

Js将负数转换为正数?

这是一种通用方法,我们首先检查数字是已经是正数还是负数,如果数字是负数,那么我们将数字乘以-1以使其为正数。使用Math.abs()方法将负数转换为正数。

Js如何从字符串中提取数字?

如果想要将一个字符串中的数字给提取出来,这要怎么做? 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数,并从字符串中提取数字。使用match()方法提取数字分两种情况:

javascript如何判断值是否是数字?

javascript如何判断一个值是否是数字?下面本篇文章就来给大家介绍一下使用javascript判断一个值是否是数字的方法,sNaN() 函数用于检查其参数是否是非数字值。如果 值x 是特殊的非数字值 NaN

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!