js 日期格式化format|极客笔记

js 日期格式化format

日期在我们日常生活中是十分常见的，在前端开发中处理日期数据也是很常见的操作。而在开发中，经常需要将日期按照指定的格式进行展示。JavaScript提供了一种简单方便的方法来格式化日期，即使用Date对象的toLocaleString()方法或者使用第三方库moment.js，但是也可以通过自定义函数来实现日期的格式化，本文将详细介绍如何通过JavaScript实现日期的格式化。

日期格式化的意义

为什么需要对日期进行格式化？在开发中，我们经常需要将日期数据以特定的形式展示给用户或者保存到数据库中。不同的需求可能需要不同的日期格式，比如需要将日期显示为”2022-10-01″或者”10/01/2022″等。对日期进行格式化可以很好地满足不同需求，提高用户体验和数据存储的准确性。

JavaScript中的日期格式化方法

使用`Date`对象的`toLocaleString()`方法

JavaScript中的Date对象提供了toLocaleString()方法，可以将日期转换为本地时间的字符串形式。这个方法可以接受3个参数：locale、options和UTC。

locale：指定要使用的语言环境，默认是当前环境的语言环境。
options：一个可选参数，可以指定日期、时间、时区的格式。
UTC：一个可选的布尔值，指定是否使用世界标准时间(UTC)而不是本地时间。

下面是一个使用toLocaleString()方法格式化日期的示例：

let date = new Date();
let formattedDate = date.toLocaleString('en-US', { 
  year: 'numeric', 
  month: '2-digit', 
  day: '2-digit' 
});

console.log(formattedDate);

运行结果为：03/24/2022

使用第三方库`moment.js`

除了原生的Date对象，我们还可以使用第三方库moment.js来处理日期。moment.js是一个轻量级的JavaScript日期处理库，使用起来非常方便。它提供了丰富的日期格式化选项，并且支持链式调用，可以轻松实现复杂的日期操作。

下面是一个使用moment.js格式化日期的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moment.js Example</title>
  <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
</head>
<body>
  <div id="date"></div>
  <script>
    let date = moment();
    let formattedDate = date.format('YYYY-MM-DD');
    document.getElementById('date').textContent = formattedDate;
  </script>
</body>
</html>

在上面的示例中，我们首先引入moment.js库，然后创建一个moment对象来表示当前时间，最后使用format()方法将日期格式化为”YYYY-MM-DD”的形式。

自定义日期格式化函数

如果不想引入第三方库，也可以通过自定义函数来实现日期的格式化。下面是一个使用自定义函数格式化日期的示例：

function formatDate(date) {
  let year = date.getFullYear();
  let month = String(date.getMonth() + 1).padStart(2, '0');
  let day = String(date.getDate()).padStart(2, '0');
  return ` ${year}-$ {month}-${day}`;
}

let date = new Date();
let formattedDate = formatDate(date);
console.log(formattedDate);

在上面的示例中，我们定义了一个名为formatDate的函数，接受一个Date对象作为参数，然后通过getFullYear()、getMonth()和getDate()方法获取年、月、日，并使用padStart()方法补全位数。最后将年月日拼接在一起返回。

日期格式化的常见格式

在实际开发中，常见的日期格式有很多种，比如”YYYY-MM-DD”、”YYYY/MM/DD”、”MM/DD/YYYY”等。下面列举了一些常见的日期格式及其对应的格式化字符串：

“YYYY-MM-DD”：'YYYY-MM-DD'
“YYYY/MM/DD”：'YYYY/MM/DD'
“MM/DD/YYYY”：'MM/DD/YYYY'
“DD/MM/YYYY”：'DD/MM/YYYY'
“YYYY年MM月DD日”：'YYYY年MM月DD日'

总结

日期格式化在前端开发中是一个常见且重要的操作，通过本文的介绽，我们了解了JavaScript中日期格式化的几种方法：使用Date对象的toLocaleString()方法、使用第三方库moment.js和自定义格式化函数。不同的业务需求可能需要不同的日期格式，选择合适的格式化方法可以有效地提高开发效率和用户体验。