详解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) {
 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;
}

上面列举的所有代码,都没有考察对比过执行效率,因为在这些应用场景下,效率是其次问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js中格式化日期时间型数据函数代码

    例如: 现有一字符串为: var dt="2010-1-1 12:20:20"; 第一步:将其转换成日期时间型数据 复制代码 代码如下: var newDt=new Date(dt.replace("-","/")); 第二步:格式化数据成"yyyy-MM-dd" (1)扩展Date 复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+

  • 用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。

    复制代码 代码如下: //传入从数据库中取出的日期类型数据 function getformatdate(d){ var formate_datetime; var array = d.split(" "); var date = array[0]; var time = array[1]; var array_date = date.split("-"); var array_time = time.split(":"); var second

  • 使用js实现数据格式化

    格式化是通过格式操作使任意类型的数据转换成一个字符串.例如下面这样 复制代码 代码如下: <script> console.log(chopper.format('{0} - {1} - {2}', 12, 24, 25)); // outputs "12 - 24 - 25" </script> 下面是一个完整的代码,可以复制到自己的项目中. 复制代码 代码如下: <!DOCTYPE html>  <html>      <hea

  • js格式化货币数据实现代码

    复制代码 代码如下: function formatCurrency(num) { var sign=""; if(isNaN(num)) { num = 0; } if(num<0) { sign="-"; } var strNum=num+""; var arr1 = strNum.split("."); var hasPoint=false;//是否有小数部分 var piontPart="";

  • PHP自定义函数格式化json数据示例

    本文实例讲述了PHP自定义函数格式化json数据的方法.分享给大家供大家参考,具体如下: <?php /** * Formats a JSON string for pretty printing * * @param string $json The JSON to make pretty * @param bool $html Insert nonbreaking spaces and <br />s for tabs and linebreaks * @return string

  • PHP的serialize序列化数据以及JSON格式化数据分析

    PHP的serialize是将变量序列化,返回一个具有变量类型和结构的字符串表达式,而JSON则是一种更轻.更友好的用于接口(AJAX.REST等)数据交换的格式. 其实两者都是以一种字符串的方式来体现一种数据结构.那么他们之间又有什么区别呢? serialize序列化 我们在一些老的WEB系统中可能会看到在数据库或在文本文件中存储着一大串貌似有着特殊含义的字符串文本内容.我们仔细看会发现它具有数据类型和结构等信息,但是它并不容易人工阅读,它只适合PHP程序读取.PHP的serialize将数组

  • 详解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

  • 微信小程序 详解Page中data数据操作和函数调用

    微信小程序 详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js <pre code_snippet_id="2049407" snippet_file_name="blog_20161214_1_1145312" name="code" class="javascript">Page(

  • 详解Java中JSON数据的生成与解析

    一.什么是JSON JSON: JavaScript Object Notation JS对象简谱,是一种类似于XML的语言.相比于XML,它更小.更快.更易解析.主要用于项目前端和Server的网络数据传输. 二.JSON的语法 对象 一个对象,由一个大括号表示{},{}中通过一个个的键值对来描述对象的属性 注意: 键与值之间使用冒号连接,多个键值对之间使用逗号分隔. 键值对的键,应使用引号引住(通常Java解析时,键不使用引号会报错,而JS能正确解析):键值对的值,可以是JS中的任意数据类型

  • 详解JavaScript中任意两数加减的解决方案

    目录 写在前面 分析填坑思路 解决整数加减的坑 转换科学计算 解决整数减法的坑 解决小数加法的坑 解决小数减法的坑 解决整数加小数的通用问题 总结 写在前面 本文是从初步解决到最终解决的思路,文章篇幅较长 虽然是一篇从0开始的文章,中间的思维跳跃可能比较大 代码的解析都在文章的思路分析和注释里,全文会帮助理解的几个关键词 1.Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 2.15长度的字符串 3.padStart 和 padEnd 分析填坑思

  • 详解JavaScript 中的批处理和缓存

    场景 最近在生产环境遇到了下面这样一个场景: 后台在字典表中存储了一些之前需要前后端共同维护的枚举值,并提供根据 type/id 获取字典的 API.所以在渲染列表的时候,有很多列表的字段直接就是字典的 id,而没有经过后台的数据拼装. 起初,吾辈解决问题的流程如下 确定字典字段,添加转换后的对象类型接口 将对象列表进行转换得到其中字典字段的所有值 对字典 id 列表进行去重 根据 id 列表从后台获取到所有的字典数据 将获得的字典数据转换为 id => 字典 的 Map 遍历最初的列表,对里面

  • 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误. JavaScript 是 Web 开发领域的"常青树".无论是 JavaScript 框架(如 Node.js.React.Angular.Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础.我们来谈谈现代 JavaScript 吧.循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法. 但问题在于,我们是否真的知道哪种循环或

  • 详解javaScript中Number数字类型的使用

    目录 前言 Number数字 自带属性值 基础使用 总结 源码地址 前言 Number和Math都属于JavaScript中的内置对象,Number数字类型作为基础数据类型,我们在开发过程中会经常用到,包括数字精度的格式化,还有字符串转换成数字等操作. Number数字 自带属性值 Number.EPSILON 两个可表示(representable)数之间的最小间隔. Number.MAX_SAFE_INTEGER JavaScript 中最大的安全整数 (2^53 - 1). Number.

  • 详解JavaScript中的4种类型识别方法

    具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

  • 详解JavaScript 中getElementsByName在IE中的注意事项

    详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE5-9中是没有实现js的 getElementsByClassName()方法,但是实现了getElementsByName()方法,但是需要注意的是这个方法在IE5-9中也返回id属性匹配的指定元素,为了兼容,应该小心谨慎使用,不要将同样的字符串同时用作了名字和ID. 测试程序如下: <div id="log"> <div id="innerLog"&

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

随机推荐