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

保留小数点后面两位

在一些要求精度没有那么准确的场景下,我们可以直接通过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. Swift中自定义打印方法

    // 1.获取打印所在的文件 let file = ( #file as NSString).lastPathComponent // 2.获取打印所在的方法 let funcName = #func ...

  2. 笔记:利用Cocos2dx 3.3 lua 做一个动作类游戏(一)

    在这之前,声明一下: 做不完我是小狗. 没办法,没毅力和恒心,之前的那个Quick Cocos2dx做的横版过关游戏的demo已经转成了3.3的版本了,其实也算是个半成品,战斗,UI啥的都有了,呵呵. ...

  3. 求最长连续公共子序列 POJ 3080

    Description The Genographic Project is a research partnership between IBM and The National Geographi ...

  4. Docker Swarm集群

    Docker Swarm集群 IP 10.6.17.11  管理节点 IP 10.6.17.12   节点A IP 10.6.17.13   节点B IP 10.6.17.14   节点C 安装 Sw ...

  5. (中等) HDU 4069 Squiggly Sudoku , DLX+精确覆盖。

    Description Today we play a squiggly sudoku, The objective is to fill a 9*9 grid with digits so that ...

  6. 一道关于 precision、recall 和 threshold关系的机器学习题

    Suppose you have trained a logistic regression classifier which is outputing hθ(x). Currently, you p ...

  7. Codeforces #350

    A题: 题意:判断火星上的节假日最多和最少 分析:除以7,然后我们对原数模7的余数进行判断一下即可 #include <iostream> #include <cstdio> ...

  8. STM32——timer

    原文地址: http://blog.sina.com.cn/s/blog_49cb42490100s6ud.html   1.     STM32的Timer简介 STM32中一共有11个定时器,其中 ...

  9. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  10. Nodejs的多线程

    转: http://snoopyxdy.blog.163.com/blog/static/60117440201349352443/