项目中常见的工具及技巧

项目中的一些操作技巧

1、数值计算和常规处理

2、日期的常用处理及操作

<h4 id="1">数值计算和常规处理</h4>
这里简单介绍几种计算及格式化的案例,项目中使用请参考案例,避免一些精度问题。

在我们发电标准化项目中引用了一个工具,使用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'复制代码
    

<h4 id="2">日期的常用处理及操作</h4>
项目中引用了dayjs,调用时使用this.$dayjs, 具体使用方法参考下面API介绍


如果没有特别说明,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 Date object

返回原生的 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339