Vue中金额、日期格式化插件@formatjs/intl的使用及说明

目录
  • Vue金额、日期格式化插件@formatjs/intl使用
  • Intl.NumberFormat用于数字计算
    • 数字分组
    • 位数控制
    • 长度表示
    • 字节单位表示
    • 复合单位表示
    • 百分比表示
    • 货币表示
    • 质量表示
    • 温度表示
    • 容积表示
    • 角度表示
    • 大数字表示
  • 总结

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],默认1
  • maximumSignificantDigits表示整体最大的位数,范围[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亿

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • vue金额格式化保留两位小数的实现

    目录 金额格式化保留两位小数 自定义过滤器 格式化金额(保留两位小数) 金额格式化保留两位小数 Vue.filter("number", function(data) {     return data.toFixed(2) }) 在需要的地方 {{integralval/100 | number}} 元 自定义过滤器 格式化金额(保留两位小数) 1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val =

  • vue js格式化数字为金额格式代码

    目录 格式化数字为金额格式 格式化金额组件 格式化数字为金额格式 /** * @description 格式化金额 * @param number:要格式化的数字 * @param decimals:保留几位小数 默认0位 * @param decPoint:小数点符号 默认. * @param thousandsSep:千分位符号 默认为, */ export const formatMoney = (number, decimals = 0, decPoint = '.', thousand

  • Vue中金额、日期格式化插件@formatjs/intl的使用及说明

    目录 Vue金额.日期格式化插件@formatjs/intl使用 Intl.NumberFormat用于数字计算 数字分组 位数控制 长度表示 字节单位表示 复合单位表示 百分比表示 货币表示 质量表示 温度表示 容积表示 角度表示 大数字表示 总结 Vue金额.日期格式化插件@formatjs/intl使用 vue项目中我们可以使用第三方比较牛的日期.金额数字格式化的插件:@formatjs/intl 这个插件的官方地址是: https://formatjs.io/docs/intl/ 更方便

  • vue过滤器实现日期格式化的案例分析

    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Date()); 我们获取的是一个标准时间,控制台的输出如下所示. 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化. 过滤器 在vue中,我们可以使用过滤器来进行时间格式化.它的写法如下: // Vue.filter(过滤器

  • vue中自定义右键菜单插件

    前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造 本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下 演示 用法 通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({   components: {     VueContext

  • SpringBoot中Jackson日期格式化技巧分享

    目录 Jackson 日期格式化技巧 后续问题 补充:Jackson 统一配置 日期转换格式 参考资料 Jackson 日期格式化技巧 使用 Spring Boot 时,需要使用 Jackson 处理一些 Java Time API 类型的 JSON 序列化问题,在处理一些类的字段时,可以通过直接在属性上加注解的方式来指定其格式化样式.但是,昨天同事遇到一个格式化 Map 数据的问题,这样就不能通过加注解来解决格式化样式的问题了. 在网上各种搜索,各种尝试后,终于解决了这个问题,记录一下,以备不

  • vue中elementUI里面一些插件的使用

    目录 全屏插件的引用 动态主题的设置 多语言实现 初始化多语言包 引入自定义语言包 封装多语言插件 总结 全屏插件的引用 全屏功能可以使用插件来实现 第一步,安装全局插件screenfull npm i screenfull@5.1.0 第二步,封装全屏显示的插件 ScreenFull/index.vue <template> <div> <!-- 放置一个按钮 --> <el-button class="icon" @click="

  • iOS中金额字符串格式化显示的方法示例

    前言 由于项目中很多地方展现统计金额, 比如在一些金融类的 App 中,对于表示金额类的字符串,通常需要进行格式化后再显示出来.例如: 0 –> 0.00 123 –> 123.00 123.456 –> 123.46 102000 –> 102,000.00 10204500 –> 10,204,500.00 它的规则如下: 个位数起每隔三位数字添加一个逗号,同时保留两位小数,也称为"千分位格式". 我们一开始采取了一种比较笨拙的处理方式如下: 首先根据

  • vue中的自定义分页插件组件的示例

    介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <div class="page-bar"> <ul> <li class="first"> <span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span> </li> &

  • 如何在Vue中使用CleaveJS格式化你的输入内容

    What's CleaveJS? CleaveJS是最近github上的一个热门项目,在短短的一个多月中star数达到了2500+,且保持着强劲的上升势头.它的主要目的是 Format input text content when you are typing 格式化你的输入内容 可以查看官方的在线DEMO进行体验. Vue-Cleave 官方的CleaveJS只提供了 原生JS 和 ReactJS 版本的,看样子也准备出 AngularJS 版的了.但是当我把 VueJS 版本的pullre

  • 基于jquery的web页面日期格式化插件

    复制代码 代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt

  • java中日期格式化的大坑

    前言 我们都知道在java中进行日期格式化使用simpledateformat.通过格式 yyyy-MM-dd 等来进行格式化,但是你知道其中微小的坑吗? yyyy 和 YYYY 示例代码 @Test public void testWeekBasedYear() { Calendar calendar = Calendar.getInstance(); // 2019-12-31 calendar.set(2019, Calendar.DECEMBER, 31); Date strDate1

随机推荐