详解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实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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程序
2006/10/09 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
进一步理解Python中的函数编程
2015/04/13 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python在文本开头插入一行的实例
2018/05/02 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python二维键值数组生成转json的例子
2019/12/06 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
顶岗实习计划书
2014/01/10 职场文书
小学清明节活动方案
2014/03/08 职场文书
拉歌口号大全
2014/06/13 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS