详解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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
完美的js图片轮换效果
Feb 05 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
JavaScript流程控制(分支)
Dec 06 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
总结对比php中的多种序列化
2016/08/28 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
在html页面中包含共享页面的方法
2008/10/24 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
js实现随机点名程序
2020/09/17 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
Python性能优化技巧
2015/03/09 Python
python编写爬虫小程序
2015/05/14 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
幼儿园中秋节活动反思
2014/02/16 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
法制教育观后感
2015/06/17 职场文书
优质护理服务心得体会
2016/01/22 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
字节飞书面试promise.all实现示例
2022/06/16 Javascript