javascript中对数据文本格式化的思考
在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。
保留小数点后面两位
在一些要求精度没有那么准确的场景下,我们可以直接通过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中对数据文本格式化的思考的更多相关文章
- JavaScript中的数据类型转换
本文中提到的“原始值”指的是undefined,null,Boolean,string和number. 本文中的对象是native对象,宿主对象(浏览器定义的对象)按照各自的算法转换. JavaScr ...
- javascript中 json数据的解析与序列化
首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...
- Javascript中Date对象的格式化
很多语言中都带有日期的格式化函数,而Javascript中却没有提供类似的方法.之前从某位前人的帖子中发现了下面的代码,感觉非常简洁,存留备用. /** * 时间对象的格式化; */ Date.pro ...
- javascript中的数据渲染与提取
table数据 <div id="tableDiv" style="overflow-x: scroll"> <table class=&qu ...
- JavaScript 中怎样判断文本框只能输出英文字母、汉字和数字,不能输入特殊字符!
JS-只能输入中文和英文2008-11-08 10:17在js中用正则表达式对象(RegExp)判断中文 ^[\u0391-\uFFE5]+$英文 ^[A-Za-z]+$中文和英文/^[\u0391- ...
- 浅谈 JavaScript 中常用数据及其类型转换
在 JavaScript 中有一些 value 会经常碰到: [] (空数组).{} (空对象).'' (空字符串).undefined.null.0.NaN.Infinite 也会经常碰到数据类型转 ...
- Regex 提取字符串中重复数据且格式化显示
方法:用 $下标 提取满足项的值 /** * 餐食信息格式转换 * @早餐,1@晚餐,2 => 早餐(1份):晚餐(2份) */ convertMealInfo = (mealInfo ...
- javascript中的数据结构
Javascript中的关键字 abstract continue finally instanceof private this boolean ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
随机推荐
- Highcharts选项配置详细说明文档
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- vs2008安装opencv2.4.6
最近安装opencv2.4.6,发现犯了一个很愚蠢的错误,在此记录一下. opencv的头文件包含应该位于build文件夹内,而我误将opencv文件夹下的include包含了进去,造成无法找到头文件 ...
- PHP 领域模型与数据库映射文章
1. http://blog.csdn.net/happen_zhang/article/details/12761747 2. http://blog.csdn.net/hguisu/article ...
- jquery如何判断元素是否被点击_百度知道
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id="parent"> <a id="a1" ...
- Centos rsync文件同步配置
一.服务器端配置: # yum -y install xinetd CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装. # vi /etc/xinetd.d ...
- Makefile常用调试方法
转载自 陈皓<跟我一起写 Makefile><GNU Make项目管理> GNU make 提供了若干可以协助调试的内置函数以及命令行选项. 1.warning函数 $(war ...
- linux Cron 执行Django 任务计划
用shell 脚本调用python 脚本如下 #!/bin/bash export FLAVOR=liveexport PYTHONPATH=$PYTHONPATH:/home/alex/Django ...
- ArcGisServer根据最大最小坐标换算瓦片行列号(转载)
ArcGisServer根据最大最小坐标换算瓦片行列号 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端 ...
- KMP算法深入解析
本文主要介绍KMP算法原理.KMP算法是一种高效的字符串匹配算法,通过对源串进行一次遍历即可完成对字符串的匹配. 1.基础知识的铺垫 字符串T的前k(0 =< k <=tlen)个连续的字 ...
- iOS 错误 之 http请求
Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is ins ...