详解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做拖动布局的思路
May 31 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
全面了解js中的script标签
Jul 04 Javascript
js变量提升深入理解
Sep 16 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
js中url对象化管理分析
2017/12/29 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python GUI模拟实现计算器
2020/06/22 Python
python 检测图片是否有马赛克
2020/12/01 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
补充协议书范本
2014/04/23 职场文书
大学生个人求职信
2014/06/02 职场文书
项目工作说明书
2014/07/29 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
政审证明范文
2015/06/19 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript