详解javascript中对数据格式化的思考

发布时间 - 2026-01-10 22:44:24    点击率:

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

保留小数点后面两位

在一些要求精度没有那么准确的场景下,我们可以直接通过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;
}

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

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


# javascript  # 数据格式化  # javascript格式化数字  # PHP自定义函数格式化json数据示例  # PHP的serialize序列化数据以及JSON格式化数据分析  # 使用js实现数据格式化  # js格式化货币数据实现代码  # js中格式化日期时间型数据函数代码  # 用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。  # 是在  # 两位  # 情况下  # 在前面  # 的是  # 是一个  # 就会  # 去做  # 可以直接  # 在这些  # 上都  # 来实现  # 大家多多  # 才会出现  # 判断是否  # 替换成  # 在实际  # console  # log  # getHours 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: php json中文编码为null的解决办法  JS碰撞运动实现方法详解  北京的网站制作公司有哪些,哪个视频网站最好?  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  如何快速选择适合个人网站的云服务器配置?  Laravel模型事件有哪些_Laravel Model Event生命周期详解  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  ,交易猫的商品怎么发布到网站上去?  如何在IIS7上新建站点并设置安全权限?  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)  Java类加载基本过程详细介绍  公司网站制作需要多少钱,找人做公司网站需要多少钱?  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  html如何与html链接_实现多个HTML页面互相链接【互相】  如何正确下载安装西数主机建站助手?  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  原生JS获取元素集合的子元素宽度实例  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  LinuxShell函数封装方法_脚本复用设计思路【教程】  Mybatis 中的insertOrUpdate操作  如何在IIS管理器中快速创建并配置网站?  使用Dockerfile构建java web环境  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Swift中循环语句中的转移语句 break 和 continue  WordPress 子目录安装中正确处理脚本路径的完整指南  如何确保西部建站助手FTP传输的安全性?  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  实例解析Array和String方法  JavaScript Ajax实现异步通信  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  如何打造高效商业网站?建站目的决定转化率  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  微信小程序 五星评分(包括半颗星评分)实例代码  详解Huffman编码算法之Java实现  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  bootstrap日历插件datetimepicker使用方法  详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)  香港服务器网站卡顿?如何解决网络延迟与负载问题?  微信公众帐号开发教程之图文消息全攻略  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  怎样使用JSON进行数据交换_它有什么限制  如何为不同团队 ID 动态生成多个非值班状态按钮  如何快速搭建二级域名独立网站?  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成