在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。

保留小数点后面两位

在一些要求精度没有那么准确的场景下,我们可以直接通过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中对数据文本格式化的思考的更多相关文章

  1. JavaScript中的数据类型转换

    本文中提到的“原始值”指的是undefined,null,Boolean,string和number. 本文中的对象是native对象,宿主对象(浏览器定义的对象)按照各自的算法转换. JavaScr ...

  2. javascript中 json数据的解析与序列化

    首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...

  3. Javascript中Date对象的格式化

    很多语言中都带有日期的格式化函数,而Javascript中却没有提供类似的方法.之前从某位前人的帖子中发现了下面的代码,感觉非常简洁,存留备用. /** * 时间对象的格式化; */ Date.pro ...

  4. javascript中的数据渲染与提取

    table数据 <div id="tableDiv" style="overflow-x: scroll"> <table class=&qu ...

  5. JavaScript 中怎样判断文本框只能输出英文字母、汉字和数字,不能输入特殊字符!

    JS-只能输入中文和英文2008-11-08 10:17在js中用正则表达式对象(RegExp)判断中文 ^[\u0391-\uFFE5]+$英文 ^[A-Za-z]+$中文和英文/^[\u0391- ...

  6. 浅谈 JavaScript 中常用数据及其类型转换

    在 JavaScript 中有一些 value 会经常碰到: [] (空数组).{} (空对象).'' (空字符串).undefined.null.0.NaN.Infinite 也会经常碰到数据类型转 ...

  7. Regex 提取字符串中重复数据且格式化显示

    方法:用   $下标    提取满足项的值 /** * 餐食信息格式转换 * @早餐,1@晚餐,2 => 早餐(1份):晚餐(2份) */ convertMealInfo = (mealInfo ...

  8. javascript中的数据结构

    Javascript中的关键字   abstract     continue      finally      instanceof      private       this boolean ...

  9. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

随机推荐

  1. php 内置的 webserver 研究。

    今天,试了一下通过 php5.4.45 内置的webserver , 在Windows XP 上面能够跑起公司的一个项目,完全无压力.哈哈,只要一个php 就可以,不需要 Apache , Nginx ...

  2. 品牌笔记本预装windows的OEM分区解决方案(联想)

    我的Y480出厂预装的win7,现在过了好久了,系统早就格盘重装成win8.1了,但是分区表里面还有个OEM分区.里面存的应该是预装的系统备份,跟笔记本电源键旁边的恢复键直接绑定......不过系统既 ...

  3. [iOS]C语言技术视频-01-变量的定义

    下载地址: 链接: http://pan.baidu.com/s/1eQJaVwY 密码: c7j8

  4. IT人常用的网站

    一.网页设计类 蓝色理想 http://www.blueidea.com 网页设计师联盟 http://www.68design.net 网页设计大本营 http://www.code-123.com ...

  5. MySQL 1054错误 Unknown column .... in 'on clause'

    ERROR 1054 (42S22): Unknown column ... in 'on clause' 原因: MySQL5.0 Bug, 要把联合的表用括号包含起来才行: 例: SELECT ( ...

  6. HDU 5678 ztr loves trees

    这题也是一眼标算..... 先搞一次dfs,把树转换成序列,对每个节点看子树的中位数,也就是看某段区间的中位数,这样就可以主席树求区间第k大值解决. 注意:询问的次数有1000000次,每次去询问会T ...

  7. ZOJ 3935 2016

    简单规律题...没看懂题目直接从输出中找到了规律. 先不管是不是闰年,前后两项的差值会形成一个等差数列,公差是64... 输出的时候再判一下闰年即可. #include<cstdio> # ...

  8. tp 框架的增

    //增 public function test() { //数据访问 //造模型对象 $nation = D("Nation"); $,'页面跳转中请稍后....'); } pu ...

  9. iOS开发系统版本适配(未完待续。。。)

    1.iOS9引入了新特性App Transport Security (ATS).新特性要求App内访问的网络必须使用HTTPS协议:iOS9系统发送的网络请求将统一使用TLS 1.2 SSL.采用T ...

  10. Memcached源码分析之thread.c

    /* * 文件开头先啰嗦几句: * * thread.c文件代表的是线程模块.但是你会看到这个模块里面有很多其它方法, 例如关于item的各种操作函数,item_alloc,item_remove,i ...