详解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 相关文章推荐
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue-star评星组件开发实例
Mar 01 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
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版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
php事件驱动化设计详解
2016/11/10 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
python学习数据结构实例代码
2015/05/11 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
8种常用的Python工具
2020/08/05 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
电大自我鉴定范文
2013/10/01 职场文书
初中语文教学反思
2014/02/02 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
应届生自荐书
2014/06/23 职场文书
大学生心理活动总结
2014/07/04 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
我去timi了,一起去timi是什么意思?
2022/04/13 杂记