详解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中Math对象使用说明
Jan 16 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php导入模块文件分享
2015/03/17 PHP
javascript引导程序
2008/10/26 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
Bootstrap模态框插件使用详解
2017/05/11 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
django中的数据库迁移的实现
2020/03/16 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
教师节主持词开场白
2015/05/29 职场文书
Python Django模型详解
2021/10/05 Python