源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解javascript中对数据格式化的思考

  • 时间:2020-12-12 21:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解javascript中对数据格式化的思考
在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。 [b]保留小数点后面两位[/b] 在一些要求精度没有那么准确的场景下,我们可以直接通过[code]Number.prototype.toFixed()[/code]来实现保留小数点两位这样的需求。
var num = 123.45678
console.log(num.toFixed(2)) //123.46

var num2 = 12
console.log(num2.toFixed(2)) //12.00
不过如果恰好,数字是一个整数,那么就会输出[code]12.00[/code]这样的格式,我们常常对于后面为[code]00[/code]的整数要求直接输出整数即可。因此不妨这样写。
var num = 123.45678
console.log(num.toFixed(2).replace('.00', '')) //123.46

var num2 = 12
console.log(num2.toFixed(2).replace('.00', '')) //12
在[code]toFixed()[/code]后面直接接着[code]replace()[/code]将整数才会出现的[code].00[/code]字符串替换掉即可。 ps: [code]Number.prototype.toFixed[/code]返回的是一个字符串 [b]数字为[0-9]的情况下,前置补0[/b] 在输出某些数字的时候下,如果是小于10的情况下需要在前面补0,尤其是在输出日期时间的时候。 以前在用[code]Date[/code]对象去获取到相关的时间数据的时候去判断是否小于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即可,一行代码,更加优雅。 再继续衍生下去,我基本上都是在日期格式化的时候需要做数字替换,何不直接整个字符串替换即可?比如将[code]2017-1-8 12:8[/code]替换成[code]2017-01-08 12:08[/code]。
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;
}

上面列举的所有代码,都没有考察对比过执行效率,因为在这些应用场景下,效率是其次问题。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部