当前位置:首页 > 日记 > 正文

详解javascript中对数据格式化的思考

详解javascript中对数据格式化的思考

在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。

保留小数点后面两位

在一些要求精度没有那么准确的场景下,我们可以直接通过Number.prototype.toFixed()来实现保留小数点两位这样的需求。

var num = 123.45678console.log(num.toFixed(2)) //123.46var num2 = 12console.log(num2.toFixed(2)) //12.00

不过如果恰好,数字是一个整数,那么就会输出12.00这样的格式,我们常常对于后面为00的整数要求直接输出整数即可。因此不妨这样写。

var num = 123.45678console.log(num.toFixed(2).replace('.00', '')) //123.46var num2 = 12console.log(num2.toFixed(2).replace('.00', '')) //12

toFixed()后面直接接着replace()将整数才会出现的.00字符串替换掉即可。

ps: Number.prototype.toFixed返回的是一个字符串

数字为[0-9]的情况下,前置补0

在输出某些数字的时候下,如果是小于10的情况下需要在前面补0,尤其是在输出日期时间的时候。

以前在用Date对象去获取到相关的时间数据的时候去判断是否小于10,如果是就补0。

var date = new Date()var min = date.getMinutes()min = min < 10 ? '0' + min : minconsole.log(min) //08

后来觉得实在不够优雅,而且代码繁多,就想到用字符串替换的方式。

var date = new Date()var min = String(date.getMinutes()).replace(/^(\d{1})$/, '0$1')console.log(min) //08

这样利用正则去匹配到单数字的情况下直接在前面加上0即可,一行代码,更加优雅。

再继续衍生下去,我基本上都是在日期格式化的时候需要做数字替换,何不直接整个字符串替换即可?比如将2017-1-8 12:8替换成2017-01-08 12:08

var date = '2017-1-8 12:8'.replace(/\b\d{1}\b/g, '0$&')console.log(date)

通过正则去做整个字符串替换,不再针对性的针对某些部分做处理了。 最后给出完整的格式化日期函数示例。

function formatDate (source, format) { var date = new Date(); format = format || 'yyyy-MM-dd hh:mm'; if (typeof source == 'string') format = source; if (typeof source == 'number') date = new Date(source);  let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.getHours(); let miniute = date.getMinutes(); let second = date.getSeconds(); return format.replace('yyyy', year)  .replace('MM', month)  .replace('dd', day)  .replace('hh', hour)  .replace('mm', miniute)  .replace('ss', second)  .replace(/\b\d{1}\b/g, '0$&'); return date;}

上面列举的所有代码,都没有考察对比过执行效率,因为在这些应用场景下,效率是其次问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

JavaScript实现离开页面前提示功能

JavaScript实现离开页面前提示功能

方法,提示,页面,功能,电脑软件,本文实例讲述了JavaScript实现离开页面前提示功能。分享给大家供大家参考,具体如下:离开页面前的提示不可以用onunload去做,因为它只是兼容IE,你要兼容Google与FireFox就蛋疼了。而且这个事件还是关闭之后才会触…

canvas实现动态小球重叠效果

canvas实现动态小球重叠效果

重叠,动态,小球,效果,电脑软件,前面的话在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动。但是,如果用canvas去实现,却是另一种思路。本文将详细介绍canvas动态小球重叠效果静态小球首先,生成随机半径、随机位置的50个静态小球<b…

react-router JS 控制路由跳转实例

react-router JS 控制路由跳转实例

路由,控制,跳转,实例,电脑软件,Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?下面是一个表单。<form onSubmit={this.handleSubmit}> <input type="text" placeholder=…

excel倒数函数的使用教程excel倒数

excel倒数函数的使用教程excel倒数

函数,使用教程,倒数,电脑软件,excel,  在Excel中,很多情况下需要进行倒数、正数的排列,这时需要用到RANK这一函数进行排序,下面是小编整理的excel倒数函数的使用教程以供大家阅读。希望对你有帮助!excel倒数函数的使用教程示例1:正排名excel倒…

利用javascript实现的三种放大镜效

利用javascript实现的三种放大镜效

三种,源码,实例,效果,电脑软件,本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。实现效果如下效果一效果二效果三调用代码如下//前面是ID或者Class,后面有init里面参数…

JS实现的模仿QQ头像资料卡显示与隐

JS实现的模仿QQ头像资料卡显示与隐

显示,头像,效果,资料卡,电脑软件,本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当…

jquery精度计算代码 jquery指定精

jquery精度计算代码 jquery指定精

精度,计算,小数位,精确,代码,本文实例为大家分享了jquery指定精确小数位的具体代码,供大家参考,具体内容如下/*** 将标签的值格式化* id 标签id* min 最小值* max 最大值*/function toFloat(id,min,max){ var htmlVal = $("#"+id).html(); …

怎么找出来被隐藏了的QQ查找被隐藏

怎么找出来被隐藏了的QQ查找被隐藏

方法,查找,电脑软件,QQ,strong,  有时候明明登录了QQ,但是却找不到QQ图标在哪里,这是因为被隐藏的原因。那么怎么把QQ找出来呢?下面小编告诉你查找被隐藏的QQ方法,希望对你有所帮助!找出来被隐藏了的QQ的方法首先要登录自己的QQ账号然后查看…

如何巧用Excel公式计算个人所得税

如何巧用Excel公式计算个人所得税

计算,个人所得税,巧用,公式,电脑软件,  个人所得税的计算看起来比较复杂,似乎不用VBA宏编程而只用公式来计算是一件不可能的事。其实,Excel提供的函数公式不但可以计算个人所得税,而且还有很大的灵活。以下是小编为您带来的关于巧用Excel公…

WPS演示怎么设置自动切换幻灯片WPS

WPS演示怎么设置自动切换幻灯片WPS

方法,设置,幻灯片,演示,设置自动,  WPS演示课件是应用最广泛的多媒体教学资源,它能够有效的将文字、图形、音频、视频、动画等多种元素融合在一起;很多情况下都是点击鼠标才会切换到下一张幻灯片,这样很不好,有些场合需要自动切换,那么如何…

jQuery Chosen通用初始化

jQuery Chosen通用初始化

初始化,通用,电脑软件,jQuery,Chosen,一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/no_results_text:"xxxxx"无搜索结果时显示的文本allow_single_deselect:true 是否允许取消选择disable…

jquery中$.fn和滚动效果实现的必备

jquery中$.fn和滚动效果实现的必备

知识,滚动效果,电脑软件,jquery,fn,前言图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery、IIFE、setInterval等基础以及$.fn用法:jquery中$.fn用法$.fn是jquery的命名空间,如果对jq…