详解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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
浅析Ajax语法
Dec 05 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
js实现点赞效果
Mar 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python追加元素到列表的方法
2015/07/28 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
领导调研接待方案
2014/02/27 职场文书
奥运会口号
2014/06/13 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
教师节班会主持词
2015/07/06 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python