项目中的一些操作技巧
1、数值计算和常规处理
2、日期的常用处理及操作
数值计算和常规处理
这里简单介绍几种计算及格式化的案例，项目中使用请参考案例，避免一些精度问题。
在我们发电标准化项目中引用了一个工具，使用this.$numeral进行调用
- 数值计算
常规的一些四则运算// 加法 失真： 0.1 + 0.2 // 0.30000000000000004 准确： this.$numeral(0.1).add(0.2).value() // 0.3 // 减法 失真： 23752.80 - 16000 // 7752.799999999999 准确： this.$numeral(23752.80).subtract(16000).value() // 7752.8 // 除法 失真： 0.023 / 0.1 // 0.22999999999999998 准确： this.$numeral(0.023).divide(0.1).value() // 0.23 // 乘法 失真： 7 * 0.8 // 5.6000000000000005 准确： this.$numeral('7').multiply('0.8').value() // 5.6 - 格式化处理
常用的格式化方式// 解析数字 this.$numeral('10,000.12'); // 10000.12 this.$numeral('$10,000.00'); // 10000 this.$numeral('3.467TB'); // 3467000000000 this.$numeral('-76%'); // -0.76 // 格式化 this.$numeral(10000.23).format('0,0'); // '10,000' this.$numeral(10000.1234).format('0.000'); // '10000.123' this.$numeral(100.1234).format('00000'); // '00100' this.$numeral(1230974).format('0.0a'); // '1.2m' this.$numeral(100).format('0o'); // '100th' this.$numeral(1000.234).format('$0,0.00'); // '$1,000.23' this.$numeral(7884486213).format('0.00b'); // '7.88GB' this.$numeral(0.974878234).format('0.000%'); // '97.488%' this.$numeral(238).format('00:00:00'); // '17:44:06'复制代码
日期的常用处理及操作
项目中引用了dayjs，调用时使用this.$dayjs, 具体使用方法参考下面API介绍
- 解析
- 当前时间
- 时间字符串
- Date 对象
- Unix 时间戳 (毫秒)
- Unix 时间戳 (秒)
- 自定义时间格式
- 复制
- 验证
- 获取+设置
- 年
- 月
- 日
- 星期
- 时
- 分
- 秒
- 毫秒
- 获取
- 设置
- 操作
- 增加
- 减少
- 开头时间
- 末尾时间
- 显示
- 格式化
- 时间差
- Unix 时间戳 (毫秒)
- Unix 时间戳 (秒)
- UTC 偏移量 (分)
- 天数 (月)
- Date 对象
- JSON
- ISO 8601 字符串
- 字符串
- 查询
- 是否之前
- 是否相同
- 是否之后
- 是否是 Dayjs
.isDayjs()
- UTC
- 插件 APIs
如果没有特别说明，Day.js 的返回值都是新的 Dayjs 对象。
解析
在 dayjs() 中传入支持的格式
当前时间
直接运行 dayjs()，得到包含当前时间和日期的 Dayjs 对象。
dayjs()
时间字符串
可以解析传入的一个标准的ISO 8601时间字符串。
dayjs(String)
dayjs('1995-12-25')
Date 对象
可以解析传入的一个 Javascript Date 对象。
dayjs(Date)
dayjs(new Date(2018, 8, 18))
Unix 时间戳 (毫秒)
可以解析传入的一个 Unix 时间戳 (13 位数字)。
dayjs(Number)
dayjs(1318781876406)
Unix 时间戳 (秒)
可以解析传入的一个 Unix 时间戳 (10 位数字)。
dayjs.unix(Number)
dayjs.unix(1318781876)
自定义时间格式
- 解析自定义时间格式如
dayjs("12-25-1995", "MM-DD-YYYY")可以使用插件CustomParseFormat
复制
Dayjs 对象是不可变的，如果您想获得一个对象的拷贝，请执行 .clone()。
向 dayjs() 里传入一个 Dayjs 对象也能实现同样的效果。
dayjs(Dayjs)
dayjs().clone()
验证
- return Boolean
检测当前 Dayjs 对象是否是一个有效的时间。
dayjs().isValid()
获取+设置
获取和改变日期。
年
获取或设置年份。
dayjs().year()
dayjs().year(2000)
月
获取或设置月份。从 0 开始
dayjs().month()
dayjs().month(0)
日
获取或设置日期。从 1 开始
dayjs().date()
dayjs().date(1)
星期
获取或设置星期。从星期天 0 开始
dayjs().day()
dayjs().day(0)
时
获取或设置小时。
dayjs().hour()
dayjs().hour(12)
分
获取或设置分钟。
dayjs().minute()
dayjs().minute(59)
秒
获取或设置秒。
dayjs().second()
dayjs().second(1)
毫秒
获取或设置毫秒。
dayjs().millisecond()
dayjs().millisecond(1)
获取
获取从 Dayjs 对象中取到的信息
传入的单位 (unit) 对大小写不敏感。
dayjs().get(unit : String)
dayjs().get('month') // 从 0 开始
dayjs().get('day')
可用单位
| 单位 | 缩写 | 描述 |
|---|---|---|
date |
日期 | |
day |
d |
星期几 (星期天 0, 星期六 6) |
month |
M |
月 (一月 0, 十二月 11) |
year |
y |
年 |
hour |
h |
时 |
minute |
m |
分 |
second |
s |
秒 |
millisecond |
ms |
毫秒 |
设置
设置时间
dayjs().set(unit : String, value : Int);
dayjs().set('date', 1);
dayjs().set('month', 3); // 四月
dayjs().set('second', 30);
操作
您可以对 Dayjs 对象如下增加减少之类的操作：
dayjs()
.startOf('month')
.add(1, 'day')
.subtract(1, 'year')
增加
增加时间并返回一个新的 Dayjs() 对象。
dayjs().add(value : Number, unit : String);
dayjs().add(7, 'day');
减少
减少时间并返回一个新的 Dayjs() 对象。
dayjs().subtract(value : Number, unit : String);
dayjs().subtract(7, 'year');
开头时间
返回当前时间的开头时间的 Dayjs() 对象，如月份的第一天。
dayjs().startOf(unit : String);
dayjs().startOf('week'); // 取决于 locale 文件里 `weekStart` 的值
末尾时间
返回当前时间的末尾时间的 Dayjs() 对象，如月份的最后一天。
dayjs().endOf(unit : String);
dayjs().endOf('month');
显示
格式化 Dayjs 对象并展示。
格式化
- return String
接收一系列的时间日期字符串并替换成相应的值。
dayjs().format(String)
dayjs('2019-01-25').format('[YYYY] YYYY-MM-DDTHH:mm:ssZ[Z]') // 'YYYY 2019-01-25T00:00:00-02:00Z'
dayjs().format('{YYYY} MM-DDTHH:mm:ssZ[Z]') // "{2014} 09-08T08:02:17-05:00Z"
详情如下:
| 格式 | 输出 | 描述 |
|---|---|---|
YY |
18 | 两位数的年份 |
YYYY |
2018 | 四位数的年份 |
M |
1-12 | 月份，从 1 开始 |
MM |
01-12 | 月份，两位数 |
MMM |
Jan-Dec | 简写的月份名称 |
MMMM |
January-December | 完整的月份名称 |
D |
1-31 | 月份里的一天 |
DD |
01-31 | 月份里的一天，两位数 |
d |
0-6 | 一周中的一天，星期天是 0 |
dd |
Su-Sa | 最简写的一周中一天的名称 |
ddd |
Sun-Sat | 简写的一周中一天的名称 |
dddd |
Sunday-Saturday | 一周中一天的名称 |
H |
0-23 | 小时 |
HH |
00-23 | 小时，两位数 |
h |
1-12 | 小时, 12 小时制 |
hh |
01-12 | Hours, 12 小时制, 两位数 |
m |
0-59 | 分钟 |
mm |
00-59 | 分钟，两位数 |
s |
0-59 | 秒 |
ss |
00-59 | 秒 两位数 |
SSS |
000-999 | 毫秒 三位数 |
Z |
+05:00 | UTC 的偏移量 |
ZZ |
+0500 | UTC 的偏移量，数字前面加上 0 |
A |
AM PM | |
a |
am pm |
- 更多格式化的选项
Q Do k kk X x ...可以使用插件AdvancedFormat - 本地化的长日期格式
L LT LTS ...可以使用插件LocalizedFormat
时间差
- return Number
获取两个 Dayjs 对象的时间差，默认毫秒。
const date1 = dayjs('2019-01-25')
const date2 = dayjs('2018-06-05')
date1.diff(date2) // 20214000000
date1.diff(date2, 'month') // 7
date1.diff(date2, 'month', true) // 7.645161290322581
date1.diff(date2, 'day') // 233
Unix 时间戳 (毫秒)
- return Number
返回 Unix 时间戳 (毫秒)
dayjs().valueOf()
Unix 时间戳 (秒)
- return Number
返回 Unix 时间戳 (秒)。
dayjs().unix()
UTC 偏移量 (分)
返回 UTC 偏移量 (分)
dayjs().utcOffset()
天数 (月)
- return Number
返回月份的天数。
dayjs().daysInMonth()
Date 对象
- return Javascript
Dateobject
返回原生的 Date 对象。
dayjs().toDate()
As JSON
- return JSON String
当序列化 Dayjs 对象时，会返回 ISO8601 格式的字符串。
dayjs().toJSON() //"2018-08-08T00:00:00.000Z"
ISO 8601 字符串
- return String
返回 ISO8601 格式的字符串。
dayjs().toISOString()
字符串
- return String
dayjs().toString()
查询
是否之前
- return Boolean
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之前。
dayjs().isBefore(Dayjs, unit? : String);
dayjs().isBefore(dayjs()); // false
dayjs().isBefore(dayjs(), 'year'); // false
是否相同
- return Boolean
检查一个 Dayjs 对象是否和另一个 Dayjs 对象时间相同。
dayjs().isSame(Dayjs, unit? : String);
dayjs().isSame(dayjs()); // true
dayjs().isSame(dayjs(), 'year'); // true
是否之后
- return Boolean
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之后。
dayjs().isAfter(Dayjs, unit? : String);
dayjs().isAfter(dayjs()); // false
dayjs().isAfter(dayjs(), 'year'); // false
是否是 Dayjs .isDayjs(compared: any)
返回一个 boolean 验证传入值是否是一个 Dayjs 对象.
dayjs.isDayjs(dayjs()) // true
dayjs.isDayjs(new Date()) // false
也可以使用 instanceof
dayjs() instanceof dayjs // true