详解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 Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
JS实现打字游戏
2019/12/17 Javascript
详解Django中的权限和组以及消息
2015/07/23 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python绘制简单折线图代码示例
2017/12/19 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
用Django写天气预报查询网站
2018/10/21 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
公务员个人自我评价分享
2013/11/06 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
python数字图像处理实现图像的形变与缩放
2022/06/28 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技