详解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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
requireJS使用指南
Apr 27 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Vue 数据绑定的原理分析
Nov 16 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 清除网页病毒的方法
2008/12/05 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
js格式化时间的方法
2015/12/18 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python matlab库简单用法讲解
2020/12/31 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
志愿者活动总结
2014/04/28 职场文书
省文明单位申报材料
2014/05/08 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL