详解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窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php json转换相关知识(小结)
2018/12/21 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python单元测试简单示例
2018/07/03 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript