Intl.NumberFormat可以根据不同语言环境对数值进行不同的格式化处理。当然Number.prototype.toLocaleString也可以对数字进行一定格式的处理,但Intl.NumberFormat是更好的选择,因为它使创建这往往是一个可重复使用的格式实例更有效。比如:输入一串数字,然后对其进行金额格式化:
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);
// 输出:八,八四八.八六
如我们所知的世界最高峰 - 珠穆朗玛峰 (其最新高度8848.86米)。若动态返回数据为8848.86,那么前端人员需要将其输出为8,848.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'即可。
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
//...
由于 JavaScript 采用 IEEE 754 标准,数值存储为64位双精度格式,数值精度最多可以达到 53 个二进制位(1 个隐藏位与 52 个有效位)。如果数值的精度超过这个限度,第54位及后面的位就会被丢弃.
由于js的弱精度,在计算小数相加时总是会丢失精度,JS将金额数字转大写的方法封装,数字大写对照表;下面为大家整理些常用的实现方法。
isNaN()的缺点就在于 null、空格以及空串会被按照0来处理;对于空数组和只有一个数值成员的数组,isNaN返回false。校验只要是数字(包含正负整数,0以及正负浮点数)就返回true
JavaScript 中浮点型精度的误差,是非常基础但是却又经常不被重视的问题。文中分享的方案,足以覆盖项目中的所有情况,但如果用在其它地方或项目中,在一些极端情况下可能会有问题。
最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。
最近在看计算机组成原理的浮点数部分,突然想起之前看过的一道快手面试题,为什么JS中0.1+0.2不等于0.3,应该如何解决?这里我们可以借这道题来说一下JS的精度问题
Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道 Infinity, 我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看 JS 中的Infinity 属性,了解用例并解决一些常见的陷阱。
这是一种通用方法,我们首先检查数字是已经是正数还是负数,如果数字是负数,那么我们将数字乘以-1以使其为正数。使用Math.abs()方法将负数转换为正数。
如果想要将一个字符串中的数字给提取出来,这要怎么做? 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数,并从字符串中提取数字。使用match()方法提取数字分两种情况:
javascript如何判断一个值是否是数字?下面本篇文章就来给大家介绍一下使用javascript判断一个值是否是数字的方法,sNaN() 函数用于检查其参数是否是非数字值。如果 值x 是特殊的非数字值 NaN
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!