JavaScript 日期格式化实现：模板替换与补零处理

作者：工具松鼠时间：2026-10-21 22:05:10浏览：509

本文介绍在 JavaScript 中通过模板字符串实现日期格式化的方法。核心步骤包括定义时间模板、获取 Date 对象各分量，利用 replace 方法将占位符替换为实际值。重点解析月份从 0 开始需加 1 的细节，以及通过三目运算符实现个位数时间补零的封装技巧，提供完整可复用代码。

日期格式化模板定义与核心逻辑

本文以常见的日期格式模板为例进行说明，例如：yyyy-MM-dd HH:mm:ss。

实现日期格式化的第一步是定义所需的格式模板字符串。

options.sign = options.sign || 'yyyy-MM-dd HH:mm:ss';

接下来调用 Date 对象获取时间分量。需要注意的是，JavaScript 中 getMonth() 返回的值是从 0 开始的，因此实际月份需要加 1。


var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var second = d.getSeconds();

将获取到的日期分量与模板字符串结合，即可完成格式化。这里主要使用了 replace 方法，将模板中的日期占位符替换为具体的数值。


var result = options.sign;
result = result.replace('yyyy', year);
result = result.replace('MM', month);
result = result.replace('dd', day);
result = result.replace('HH', hours);
result = result.replace('mm', minutes);
result = result.replace('ss', second);
return result;

完成基础功能后，可以进一步优化体验。例如，原始数据可能显示为 2017-2-1 9:2:8，而标准格式通常要求为 2017-02-01 09:02:08，即需要对不足两位的数字进行补零处理。

为此，可以封装一个辅助函数来处理补零逻辑。这涉及三目运算符等基础语法知识，扎实的基础有助于写出更健壮的代码。

时间补零处理与完整代码实现


var _complete = function(n){
　　return (n>9) ? n : '0' + n;
}

该辅助函数封装完成后，即可在获取具体时分秒时调用，例如获取 hours 时先经过该函数处理，确保输出格式统一。

var hours = _complete(d.getHours());

以下是完整的实现代码示例。


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日期时间</title>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
 //yyyy-MM-dd
 var getDateFormat = function(options){
  options = options || {};
  options.sign = options.sign || 'yyyy-MM-dd HH:mm:ss';
  var _complete = function(n){
   return (n>9) ? n : '0' + n;
  }
  var d = new Date();
  var year = d.getFullYear();
  var month = _complete(d.getMonth()+1);
  var day = _complete(d.getDate());
  var hours = _complete(d.getHours());
  var minutes = _complete(d.getMinutes());
  var second = _complete(d.getSeconds());
  var result = options.sign;
  result = result.replace('yyyy', year);
  result = result.replace('MM', month);
  result = result.replace('dd', day);
  result = result.replace('HH', hours);
  result = result.replace('mm', minutes);
  result = result.replace('ss', second);
  return result;
 }
 console.log(getDateFormat());
</script>

以上即为 JavaScript 日期格式化的完整实现过程，希望内容对您的开发工作有所帮助。

作者最新文章

JS表单序列化出现中文乱码怎么解决

2026-11-05 17:21:05

JS代码在线格式化工具推荐：无需安装快速美化

2026-11-05 17:17:49

WebStorm内置JS代码格式化功能怎么用

2026-11-05 10:10:47

在线JS代码格式化与混淆压缩工具推荐及使用指南

2026-11-03 20:31:53

CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用

2026-11-03 18:52:45