javascript中对数据文本格式化的思考
2017-01-22 22:12
344 查看
在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。
不过如果恰好,数字是一个整数,那么就会输出
在
ps:
以前在用
后来觉得实在不够优雅,而且代码繁多,就想到用字符串替换的方式。
这样利用正则去匹配到单数字的情况下直接在前面加上0即可,一行代码,更加优雅。
再继续衍生下去,我基本上都是在日期格式化的时候需要做数字替换,何不直接整个字符串替换即可?比如将
通过正则去做整个字符串替换,不再针对性的针对某些部分做处理了。 最后给出完整的格式化日期函数示例。
保留小数点后面两位
在一些要求精度没有那么准确的场景下,我们可以直接通过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 = 'yyyy-MM-dd') { let date = new Date(); if (typeof source === 'string') format = source; if (typeof source === 'number') date = new Date(source); if (typeof source === 'object') date = source; const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); const hour = date.getHours(); const miniute = date.getMinutes(); const 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$&'); }
上面列举的所有代码,都没有考察对比过执行效率,因为在这些应用场景下,效率是其次问题。
相关文章推荐
- JavaScript物体运动一
- JSTL标签的<c:forEach>用法示例
- javascript在form表单中使用button按钮实现submit提交方法
- jsp的基本语法——请求转发和重定向
- JSON-handle-好玩的google插件
- Ajax动态为下拉列表添加数据
- 一个纯Servlet和JSP实现的小博客系统的开发心得
- JavaScript入门——变量与数据类型基础
- 【译】你是“10倍效率”JS开发者吗
- JavaScript入门——基础'判断/循环'语句汇总
- js调用打印接口打印web页面之——使用lodop组件打印jsp web页面
- JS的继承
- Javascript 类的公有私有
- js上传图片包括后台处理
- javascript 学习指南--语法
- javascript基础:prototype对象的继承
- JSON 修改问题:浅拷贝 和 深拷贝
- JavaScript跨域总结与解决办法
- JavaScript基本概念——DOM(五)
- JavaScript基本概念(四)