当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript日期格式化方法与避坑指南

JavaScript日期格式化方法与避坑指南

2025-11-09 12:09:36 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript日期格式化技巧与常见错误避坑》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript日期时间本地化与格式化：避免常见陷阱与最佳实践

本文深入探讨JavaScript中日期和时间本地化与格式化的常见问题，特别是`toLocaleString()`方法返回字符串导致的`getFullYear()`错误。我们将介绍如何通过手动格式化、使用`padStart`、模板字符串以及更高级的标签模板来高效且优雅地处理日期时间，同时强调现代JavaScript的编程实践。

在JavaScript中处理日期和时间时，开发者经常需要将日期对象转换为用户友好的本地化字符串。然而，在使用Date对象的toLocaleString()方法时，一个常见的误解可能导致运行时错误，即尝试在toLocaleString()返回的字符串上调用Date对象的方法（如getFullYear()）。本教程将详细解释这一问题，并提供多种健壮且符合现代JavaScript规范的日期时间格式化方案。

理解 toLocaleString() 的行为

Date.prototype.toLocaleString() 方法根据语言环境（locale）和格式化选项将日期转换为字符串。关键在于，它返回的是一个字符串，而不是一个Date对象。一旦日期被转换为字符串，它就不再拥有Date对象的方法（如getFullYear()、getMonth()、getDate()等）。

例如，以下代码会抛出错误：

var options = { year: "numeric", day: "numeric", month: "long" };
var d = new Date().toLocaleString("fa-IR", options); // d 现在是一个字符串
// 尝试在字符串上调用 Date 方法，将导致错误：d.getFullYear is not a function
// var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();

为了正确地获取日期的各个组成部分并进行自定义格式化，我们应该始终在原始的Date对象上调用这些方法，而不是在toLocaleString()的返回值上。

手动日期时间格式化：基础与改进

当我们需要对日期时间进行高度定制化的格式化，或者需要特定的分隔符时，手动从Date对象中提取各个部分是常见的做法。

1. 基本手动格式化

首先，我们创建一个Date对象，然后使用其方法获取年、月、日、时、分、秒。

const d = new Date(); // 创建一个Date对象

const year = d.getFullYear();
const month = d.getMonth() + 1; // getMonth() 返回 0-11
const day = d.getDate();
const hours = d.getHours();
const minutes = d.getMinutes();
const seconds = d.getSeconds();

// 简单的字符串拼接
const strDate = `最后访问时间 ${year}/${month}/${day} 在 ${hours}:${minutes}:${seconds}`;
console.log(strDate);

2. 改进：数字填充与模板字符串

上述基本格式化存在一个问题：如果月份、日期、小时、分钟或秒是个位数，它们将不会有前导零（例如，1月会显示为1而不是01）。这通常不是我们期望的格式。为了解决这个问题，我们可以使用String.prototype.padStart()方法。同时，使用ES6的模板字符串（Template Literals）可以大大提高代码的可读性。

const d = new Date();

// 辅助函数：将数字填充为两位，不足则前面补0
const pad = num => num.toString().padStart(2, '0');

const year = d.getFullYear();
const month = pad(d.getMonth() + 1); // 月份加1并填充
const day = pad(d.getDate());
const hours = pad(d.getHours());
const minutes = pad(d.getMinutes());
const seconds = pad(d.getSeconds());

// 使用模板字符串进行格式化
const strDate = `最后访问时间 ${year}/${month}/${day} 在 ${hours}:${minutes}:${seconds}`;
console.log(strDate);

注意事项：

在现代JavaScript中，应优先使用const或let声明变量，而不是var，以避免潜在的作用域问题。
模板字符串（使用反引号 `）允许嵌入表达式${expression}，使得字符串拼接更加直观和简洁。

进阶格式化：使用标签模板（Tagged Templates）

对于更复杂的或重复的格式化需求，我们可以利用标签模板（Tagged Templates）来创建自定义的字符串处理函数。标签模板允许我们在模板字符串前面放置一个函数名，该函数将接收字符串的各个部分和嵌入的表达式作为参数，从而实现更强大的字符串操作。

const d = new Date();

/**
 * 标签模板函数，用于格式化日期时间字符串
 * @param {Array<string>} strings - 模板字符串的静态部分
 * @param {...number} nums - 模板字符串中嵌入的表达式的值
 * @returns {string} 格式化后的日期时间字符串
 */
const formatDate = (strings, ...nums) => {
    // 将每个数字填充为两位，并与对应的字符串部分拼接
    let result = '';
    nums.forEach((num, idx) => {
        result += strings[idx] + num.toString().padStart(2, '0');
    });
    // 添加最后一个字符串部分
    result += strings.at(-1); // 使用 .at(-1) 获取最后一个元素
    return result;
};

// 使用标签模板进行格式化
const strDate = formatDate`最后访问时间 ${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} 在 ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
console.log(strDate);

这个formatDate标签模板函数接收模板字符串的静态部分（如"最后访问时间 "、"/"、" 在 "等）和动态部分（年、月、日等）作为参数。它遍历动态部分，对每个数字进行padStart(2, '0')处理，然后将它们与静态部分拼接起来，最终生成一个格式化的日期时间字符串。这种方法使得日期格式化逻辑更加封装和可复用。

何时使用 toLocaleString() 系列方法

尽管toLocaleString()直接返回字符串的特性可能导致上述错误，但它在某些场景下仍然非常有用：

需要标准本地化格式时： 当你不需要高度定制的格式，而是希望浏览器根据用户的语言环境提供标准的日期或时间格式时，toLocaleString()、toLocaleDateString()和toLocaleTimeString()是最佳选择。
处理多种语言环境： 这些方法允许你指定不同的语言环境（如"en-US"、"zh-CN"、"fa-IR"等），以适应全球用户的显示需求。

例如，如果你只需要一个标准的波斯语日期字符串：

const d = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const persianDate = d.toLocaleDateString("fa-IR", options);
console.log(persianDate); // 输出如 "۲۴ خرداد ۱۴۰۳" (根据当前日期)

关键点在于： 如果你使用了toLocaleString()系列方法，就不要再尝试在其返回值上调用getFullYear()等Date对象的方法。如果你需要进一步处理日期（例如，提取特定部分并以自定义格式显示），请在调用toLocaleString()之前完成这些操作，或者使用我们上面介绍的手动格式化方法。