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


Posted in Javascript onJanuary 23, 2017

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

保留小数点后面两位

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

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

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

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

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

var num2 = 12
console.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 : min
console.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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
You might like
浅谈PHP Cookie处理函数
2016/06/10 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Angular实现响应式表单
2017/08/04 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
详解python with 上下文管理器
2020/09/02 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
小学生美德少年事迹
2014/02/02 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
《满井游记》教学反思
2014/02/26 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
开票证明
2015/06/23 职场文书
公司档案管理制度
2015/08/05 职场文书
防溺水主题班会教案
2015/08/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP