详解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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
redux-saga 初识和使用
Mar 10 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
flash用php连接数据库的代码
2011/04/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
10个php函数实用却不常见
2015/10/13 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Django 批量插入数据的实现方法
2020/01/12 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
计算机专业学生的自我评价
2013/12/15 职场文书
英语生日邀请函
2014/01/23 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
手机银行营销方案
2014/03/14 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
神龙架导游词
2015/02/11 职场文书
行政前台岗位职责
2015/04/16 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB