详解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 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 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超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
angular动态表单制作
2018/02/23 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
python使用json序列化datetime类型实例解析
2018/02/11 Python
python更改已存在excel文件的方法
2018/05/03 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
会计系毕业个人自荐信格式
2013/09/23 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
村长贪污检举信
2014/04/04 职场文书
服务整改报告
2014/11/06 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书