专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

numberformat的作用,numberformat数字格式化应用

来源:小易整编  作者:小易  发布时间:2023-03-17 09:52
摘要:numberformat的作用,numberformat数字格式化应用 Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理,以便用户更好的阅读。例如:数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容...

   numberformat的作用,numberformat数字格式化应用  

numberformat的作用,numberformat数字格式化应用

Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理,以便用户更好的阅读。例如:数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容量及一些符合单位等数据类型进行处理转换。所以下面看看关于Intl.NumberFormat对象对这些数值如何处理。

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

关于Intl对象前面有文章提到过,这里不再赘述。今天看看Intl中关于Intl.NumberFormat的应用。

常见应用背景

打开你手机相关应用软件(支付宝、微信、银行...),含金额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米。

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亿

本文地址:IT问答频道 https://www.hkm168.com/itwenda/929609.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小易整编
相关文章相关阅读
  • 修复:在 Xbox 应用上的 Halo Infinite(Campaign)安装错误...

    修复:在 Xbox 应用上的 Halo Infinite(Campaign)安装错误代码 0X80070032、0X80070424 或 0X80070005

    haloinfinite(campaign)是一款第一人称射击视频游戏,于2021年11月推出,可供单人和多用户使用。该游戏是halo系列的延续,适用于windows、xboxone和xbox系列的用户x|s。最近...

  • 电容的作用

    电容的作用

    电容主要用于交流电路、脉冲电路中,在直流电路中电容器一般起隔断直流的作用。电容既不产生也不消耗能量,是储能元件。电容在电力系统中是提高功率因数的重要器件;在电子电路中是获得振荡、滤波、相移、旁路、耦合等作用的主要元件。电容在电路中起到四个作...

  • 功放ic的作用

    功放ic的作用

    功放ic的作用:1、信号放大,通过将输入信号放大到更高的功率级别,以便能够驱动扬声器或其他负载;2、电流放大,可以将输入的低电流信号放大为较高的电流输出,以满足负载的需求;3、保持信号质量,使放大后的信号保持原始信号的准确性和清晰度;4、控...

  • java中tostring方法的作用是什么

    java中tostring方法的作用是什么

    java中tostring方法的作用是会返回一个【以文本方式表示】此对象的字符串,结果是一个简明但易于读懂的信息表达式。java中tostring方法的作用是toString方法会返回一个“以文本方式表示”此对象的字符串。结果是一个简明但易...

  • 电脑f1到f12的作用是什么

    电脑f1到f12的作用是什么

    电脑f1到f12的作用:1、f1获得帮助;2、f2对文件夹快速重命名;3、f3快速打开搜索窗口;4、f4打开ie中的地址栏列表;5、f5刷新ie或资源管理器中当前所在窗口的内容;6、f6快速在资源管理器及ie中定位到地址栏。本文操作环境:W...

  • C语言中的指针有什么作用

    C语言中的指针有什么作用

    c语言中的指针的作用是:通过指针不仅可以对数据本身,还可以对存储数据的变量地址进行操作。指针就是内存地址,指针变量是用来存放内存地址的变量。指针定义:指针,是C语言中的一个重要概念及其特点,也是掌握C语言比较困难的部分。指针也就是内存地址,...

  • Vue路由守卫详解及其应用场景分析

    Vue路由守卫详解及其应用场景分析

    随着前端技术的不断发展,vue作为一款开发框架也越来越受到开发者们的欢迎。而vue的路由机制也是vue框架中不可或缺的一部分。路由系统能够帮助开发人员构建复杂的单页应用,同时也提供了一种灵活的方式来管理页面状态和用户导航。在这种情况下,vu...

  • windows中的任务栏有什么作用

    windows中的任务栏有什么作用

    任务栏的定义:任务栏就是位于桌面最下方的长方形选框,主要由开始菜单、快速启动栏、应用程序区和托盘区组成。任务栏的主要功能:1、显示当前任务;2、设置快速启动栏,方便启动;3、可以显示当前电脑运行的一些重要程序;4、可以设置自己经常使用的程序...

  • 周排行
  • 月排行
  • 年排行

精彩推荐