Vue中金额、日期格式化插件@formatjs/intl的使用及说明
作者:低头确望水中月亮 发布时间:2024-04-27 16:06:48
Vue金额、日期格式化插件@formatjs/intl使用
vue项目中我们可以使用第三方比较牛的日期、金额数字格式化的插件:@formatjs/intl
这个插件的官方地址是:
https://formatjs.io/docs/intl/
更方便的是:此插件有Flutter 版本,在Flutter开发中也可以参考使用。
具体的安装步骤:
# npm 的安装步骤
npm i @formatjs/intl --save
# yarn 的安装步骤如下
yarn add @formatjs/intl
# 上面步骤都会保存到package.json 中
简单的使用步骤方式:
# 在script 中定义 工具的实例
# 以格式化金额的方式为例子
const intl = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'RMB' })
# 更多的方式可以参考官方的链接进行了解。
var value = 1000;
intl.format(value)
# 格式化出来的结果数据样式为: RMB 1,000.00
Intl.NumberFormat用于数字计算
Intl.NumberFormat是国际化的数字处理方案,它可以用来显示不同国家对数字对处理偏好,但是一般情况下,我们还是处理中文数字比较多,但是我发现这个Intl.NumberFormat也挺好用的。
这个插件的官方地址是:https://formatjs.io/docs/intl/
数字分组
new Intl.NumberFormat('zh-CN',{useGrouping:true}).format(12345678);
"12,345,678"
new Intl.NumberFormat('zh-CN',{useGrouping:false}).format(12345678)
"12345678"
位数控制
new Intl.NumberFormat('zh-CN',{minimumIntegerDigits:2}).format(12345678);
"12"
minimumIntegerDigits
表示整数部分最小要几位置,默认1,范围[1,21]minimumFractionDigits
表示小数部分最小要几位,默认0,范围[0,20]maximumFractionDigits
表示小数部分最多几位,范围[0,20]。纯数字默认3,货币,百分比默认2。minimumSignificantDigits
表示整体最小的位数,范围[1,21],默认1maximumSignificantDigits
表示整体最大的位数,范围[1,21]:
整体位数的控制权大于局部位数的控制权。
长度表示
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
// ...
复合单位表示
单位连接组合,如:‘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: 'kilogram',
});
const res = formatter.format(500);
// 输出:500kg
更多单位如: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亿
来源:https://blog.csdn.net/LetCode/article/details/122915550
猜你喜欢
- 最近和一程序员合作项目。弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来。结果我打开他的页面,看了看,从头第一个开始就是content
- 本文效果图:🌻正文注意:我们介绍一下本次开发使用的是uniapp,本次分享内容的搜索框为禁止输入搜索框,点击跳转专属搜索页面。🍉1、查阅官网
- 限流是项目中经常需要使用到的一种工具,一般用于限制用户的请求的频率,也可以避免瞬间流量过大导致系统崩溃,或者稳定消息处理速率这个文章主要是使
- 有两种类型的回调函数:blocking callbacks (also known as synchronous callbacks or
- Python的3.0版本,常被称为Python 3000,或简称Py3k。相对于Python的早期版本,这是一个较大的升级。为了不带入过多的
- 如IE6,在他上面还不那么富饶,给程序调试带来的很大的痛苦啊,所以日志即时输出是一个不错的选择,可以知道程序覆盖到了哪里。即是在先进的浏览器
- 不少同学一提到泰勒公式,脑海里立马浮现高大上的定义和长长的公式,令人望而生畏。实际上,泰勒公式没有那么可怕,它是用简单的多项式来逼近一个光滑
- 爬取过程:你好,李焕英 短评的URL:https://movie.douban.com/subject/34841067/comments?
- 1. 下载darknet源码在命令窗口(terminal)中进入你想存放darknet源码的路径,然后在该路径下输入依次输入以下命令:git
- 算法是计算机科学中一个重要的研究方向,是解决复杂问题的关键。在计算机世界中,算法无处不在。数据库是存储数据和执行大批量计算的场所,在数据库中
- 这是一个获取字符串中两个子串之间的子串,如从字符串www.aspxhome.com中获取coderbolg子串,就让这个PHP函数来实现吧,
- 在Soundbreak我们每天24小时不间断地播放实况音频和视频,所以对于MySQL的新增的复制特性,我们不能做出很令人信服的测试。通过测试
- 本文描述通过统计分析出医院信息系统需分区的表,对需分区的表选择分区键,即找出包括在你的分区键中的列(表的属性),对大型数据的管理比较有意义,
- SQL Server常见的问题主要是SQL问题造成,常见的主要是CPU过高和阻塞。一、CPU过高的问题1、查询系统动态视图查询执行时间长的s
- 前言我们知道在某些停机测试场景,是需要人为禁用crs/has的自启动的,防止过程中主机反复重启对数据库集群造成影响。使用crsctl dis
- 前言最近在做项目高可用时,需要使用数据同步。由于只有双节点,且采用主主同步可能存在循环同步的风险,故综合考虑采用Mysql主从同步(Mast
- python的annotate函数annotate函数该函数的详细参数可调用内置属性__doc__查看。import matplotlib.
- Anaconda安装:anaconda官方下载地址https://www.anaconda.com/products/individual注
- 外联接。外联接可以是左向外联接、右向外联接或完整外部联接。 在 FROM 子句中指定外联接时,可以由下列几组
- 目录一、MySQL触发器创建:1、MySQL触发器的创建语法:2、MySQL创建语法中的关键词解释:3、触发执行语句内容(trigger_b