详解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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue v-for直接循环数字实例
Nov 07 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代码(星期六,星期日总和)
2009/11/12 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
VUE重点问题总结
2018/03/19 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python实现k-means聚类算法
2018/02/23 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
工伤赔偿协议书
2014/04/15 职场文书
服务承诺书格式
2014/05/21 职场文书
禁烟标语大全
2014/06/11 职场文书
护理专业求职信
2014/06/15 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年度个人工作总结
2014/11/07 职场文书
导游词之潮音寺
2019/09/26 职场文书
如何用python反转图片,视频
2021/04/24 Python