详解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编程起步(第三课)
Feb 27 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
如何利用React实现图片识别App
Feb 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中实现简单的ACL 完结篇
2011/09/07 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
js实现无缝轮播图
2020/03/09 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python字符串替换的2种方法
2014/11/30 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python中的字典使用分享
2016/07/31 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
浅析Git版本控制器使用
2017/12/10 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
房屋登记授权委托书范本
2014/10/09 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2019年工作总结范文
2019/05/21 职场文书