详解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小技巧 2.5 则
Sep 12 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 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危险函数(disable_functions)
2012/02/23 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
React Router基础使用
2017/01/17 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
js实现一个简易计算器
2020/03/30 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python @property的用法及含义全面解析
2018/02/01 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python实现购物车程序
2018/04/16 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python实现XML解析的方法解析
2019/11/16 Python
python range实例用法分享
2020/02/06 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
init进程的作用
2012/04/12 面试题
日语求职信范文
2013/12/17 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
科级干部培训心得体会
2016/01/06 职场文书
js实现上传图片到服务器
2021/04/11 Javascript