JavaScript原生时间戳与日期API详解及时间库Moment.js应用

2024-04-06 10:04

本文主要是介绍JavaScript原生时间戳与日期API详解及时间库Moment.js应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

在JavaScript中,时间戳(timestamp)是一种表示特定时刻距离某个固定时间点的毫秒数。通常这个固定时间点是指1970年1月1日00:00:00(UTC),即Unix纪元。时间戳广泛用于计算机系统中记录和处理日期和时间信息,因为它简洁且易于进行数学运算。

以下是对JavaScript中时间戳与日期之间的相关操作的详解:

1. 获取当前时间戳

获取当前时间(浏览器所在时区的当前时刻)的时间戳,可以使用Date对象的getTime()方法:

let currentTimeStamp = new Date().getTime();
// 输出:一个表示当前时刻的毫秒数(如:1712363430254)

2. 将时间戳转换为日期对象

给定一个时间戳,可以通过Date构造函数将其转换为JavaScript日期对象:

let timestamp = 1712363430254; // 假设这是一个时间戳
let dateObject = new Date(timestamp);
// dateObject现在是一个代表相应时刻的Date对象,可以调用其各种方法获取年、月、日、时、分、秒等信息

3. 格式化日期对象

将日期对象按照特定格式输出,通常涉及使用Date对象的getFullYear()getMonth()(注意月份范围是0-11,需要加1得到实际月份)、getDate()getHours()getMinutes()getSeconds()等方法,并自行拼接字符串。例如:

function formatTimestamp(timestamp) {let date = new Date(timestamp);let year = date.getFullYear();let month = String(date.getMonth() + 1).padStart(2, '0');let day = String(date.getDate()).padStart(2, '0');let hours = String(date.getHours()).padStart(2, '0');let minutes = String(date.getMinutes()).padStart(2, '0');let seconds = String(date.getSeconds()).padStart(2, '0');return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}let formattedDate = formatTimestamp(currentTimeStamp);
// 输出:如 "2022-0¾-15 10:30:45"

4. 使用toLocaleString()进行本地化格式化

如果希望按照浏览器用户的本地语言环境和格式偏好来显示日期和时间,可以使用toLocaleString()方法:

let localFormattedDate = new Date(currentTimeStamp).toLocaleString();
// 输出:根据用户设置的格式,如 "2022年4月15日 10:30:45"

5. 时间戳与指定日期格式之间的转换

a. 时间戳转为指定格式字符串

可以编写自定义函数,结合Date对象的各getter方法和字符串操作来实现。例如:

function timestampToCustomFormat(timestamp, format) {const date = new Date(timestamp);const replacements = {'YYYY': date.getFullYear(),'MM': String(date.getMonth() + 1).padStart(2, '0'),'DD': String(date.getDate()).padStart(2, '0'),'HH': String(date.getHours()).padStart(2, '0'),'mm': String(date.getMinutes()).padStart(2, '0'),'ss': String(date.getSeconds()).padStart(2, '0'),};return format.replace(/YYYY|MM|DD|HH|mm|ss/g, matched => replacements[matched]);
}let customFormat = timestampToCustomFormat(currentTimeStamp, 'YYYY-MM-DD HH:mm:ss');
// 输出:如 "2022-04-15 10:30:45"
b. 指定格式字符串转为时间戳

这通常需要解析输入字符串,提取年、月、日、时、分、秒等部分,然后使用new Date(year, monthIndex, day, hours, minutes, seconds)构造一个日期对象,最后调用getTime()获取其时间戳。对于复杂的自定义格式,可能需要使用正则表达式或其他字符串解析库来辅助解析。

6. 日期计算

基于时间戳或日期对象,可以方便地进行日期和时间的加减计算:

// 添加或减去指定的毫秒数来改变日期
let futureDate = new Date(currentTimeStamp + 24 * 60 * 60 * 1000); // 加一天
let pastDate = new Date(currentTimeStamp - 7 * 24 * 60 * 60 * 1000); // 减一周// 或者使用Date对象的setFullYear(), setMonth(), setDate(), etc.方法进行更精细的调整
date.setFullYear(date.getFullYear() + 1); // 加一年
date.setMonth(date.getMonth() + 3); // 加三个月

注意事项

  • JavaScript中的日期和时间处理受浏览器所在时区影响,如果不希望受到时区影响,应明确处理时区问题,如使用UTC时间。
  • 时间戳通常以毫秒为单位,但在某些场景下可能会遇到秒级时间戳,此时需要乘以1000转换为毫秒再创建Date对象。
  • Date对象的getMonth()方法返回的月份是从0开始的,所以在显示时通常需要加1。
  • 对于旧版浏览器,确保检查所使用的日期和时间方法是否存在兼容性问题。

7. JavaScript 时间处理库

Moment.js以其便捷的API、丰富的功能和良好的社区支持,成为JavaScript开发中处理日期和时间问题的标准选择之一。尽管近年来出现了如Luxon、Day.js等替代品,以及原生ECMAScript日期/时间API的改进,但Moment.js仍因其成熟稳定和广泛的现有项目集成而被广泛应用。

Moment.js 是一个广受欢迎且久经考验的 JavaScript 库,专注于简化日期和时间的处理。它提供了一套强大、灵活且易于使用的API,旨在解决JavaScript原生日期对象在处理复杂日期逻辑时的诸多不便。

以下是一些使用Moment.js进行日期和时间处理的示例:

1. 创建Moment对象

import moment from 'moment';// 当前时间
let now = moment();// 指定日期时间
let specificDate = moment('2024-0¼-06T14:30:00'); // ISO 8601格式// 从Date对象创建
let jsDate = new Date();
let momentFromJsDate = moment(jsDate);// 从时间戳创建
let timestamp = 1649.jpg469123456;
let momentFromTimestamp = moment(timestamp);

2. 解析和格式化

// 解析字符串
let parsedDate = moment('2024-04-06 14:30:00', 'YYYY-MM-DD HH:mm:ss');// 格式化输出
let formattedDate = parsedDate.format('MMM Do YYYY, h:mm:ss a'); // Apr 6th 2024, 2:30:00 pm// 显示相对时间(如"刚刚"、"1小时前"等)
let relativeTime = moment().subtract(1, 'days').fromNow(); // 1 day ago

3. 日期操作

// 添加时间
let tomorrow = now.clone().add(1, 'day');// 减去时间
let yesterday = now.clone().subtract(1, 'week');// 比较日期
let isFuture = specificDate.isAfter(now); // 是否在未来// 获取时间间隔
let duration = moment.duration(1, 'month');
let daysInMonth = duration.asDays(); // 30天左右

4. 时区处理(需安装moment-timezone

import moment from 'moment-timezone';// 设置时区
let newYorkTime = moment.tz('2024-04-06 14:30:00', 'America/New_York');// 转换时区
let londonTime = newYorkTime.clone().tz('Europe/London');// 当前时区的本地时间
let localTime = moment().tz(moment.tz.guess());

5. 本地化

import 'moment/locale/fr'; // 引入法语本地化文件// 设置当前locale
moment.locale('fr');// 格式化时使用法语
let frenchDate = moment().format('LL'); // 06 avril 2024

以上就是JavaScript中关于时间戳与日期之间转换、格式化及计算的详细说明。在实际项目中,应考虑项目的具体需求、性能要求以及对新特性和最佳实践的接受程度,去灵活的使用原生时间、时间库的API。

在这里插入图片描述

这篇关于JavaScript原生时间戳与日期API详解及时间库Moment.js应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/879646

相关文章

Spring Security重写AuthenticationManager实现账号密码登录或者手机号码登录

《SpringSecurity重写AuthenticationManager实现账号密码登录或者手机号码登录》本文主要介绍了SpringSecurity重写AuthenticationManage... 目录一、创建自定义认证提供者CustomAuthenticationProvider二、创建认证业务Us

Java Stream流以及常用方法操作实例

《JavaStream流以及常用方法操作实例》Stream是对Java中集合的一种增强方式,使用它可以将集合的处理过程变得更加简洁、高效和易读,:本文主要介绍JavaStream流以及常用方法... 目录一、Stream流是什么?二、stream的操作2.1、stream流创建2.2、stream的使用2.

Java对接MQTT协议的完整实现示例代码

《Java对接MQTT协议的完整实现示例代码》MQTT是一个基于客户端-服务器的消息发布/订阅传输协议,MQTT协议是轻量、简单、开放和易于实现的,这些特点使它适用范围非常广泛,:本文主要介绍Ja... 目录前言前置依赖1. MQTT配置类代码解析1.1 MQTT客户端工厂1.2 MQTT消息订阅适配器1.

Spring Boot项目如何使用外部application.yml配置文件启动JAR包

《SpringBoot项目如何使用外部application.yml配置文件启动JAR包》文章介绍了SpringBoot项目通过指定外部application.yml配置文件启动JAR包的方法,包括... 目录Spring Boot项目中使用外部application.yml配置文件启动JAR包一、基本原理

SpringBoot加载profile全面解析

《SpringBoot加载profile全面解析》SpringBoot的Profile机制通过多配置文件和注解实现环境隔离,支持开发、测试、生产等不同环境的灵活配置切换,无需修改代码,关键点包括配置文... 目录题目详细答案什么是 Profile配置 Profile使用application-{profil

Java中InputStream重复使用问题的几种解决方案

《Java中InputStream重复使用问题的几种解决方案》在Java开发中,InputStream是用于读取字节流的类,在许多场景下,我们可能需要重复读取InputStream中的数据,这篇文章主... 目录前言1. 使用mark()和reset()方法(适用于支持标记的流)2. 将流内容缓存到字节数组

Java慢查询排查与性能调优完整实战指南

《Java慢查询排查与性能调优完整实战指南》Java调优是一个广泛的话题,它涵盖了代码优化、内存管理、并发处理等多个方面,:本文主要介绍Java慢查询排查与性能调优的相关资料,文中通过代码介绍的非... 目录1. 事故全景:从告警到定位1.1 事故时间线1.2 关键指标异常1.3 排查工具链2. 深度剖析:

Springboot项目登录校验功能实现

《Springboot项目登录校验功能实现》本文介绍了Web登录校验的重要性,对比了Cookie、Session和JWT三种会话技术,分析其优缺点,并讲解了过滤器与拦截器的统一拦截方案,推荐使用JWT... 目录引言一、登录校验的基本概念二、HTTP协议的无状态性三、会话跟android踪技术1. Cook

C#中的Drawing 类案例详解

《C#中的Drawing类案例详解》文章解析WPF与WinForms的Drawing类差异,涵盖命名空间、继承链、常用类及应用场景,通过案例展示如何创建带阴影圆角矩形按钮,强调WPF的轻量、可动画特... 目录一、Drawing 是什么?二、典型用法三、案例:画一个“带阴影的圆角矩形按钮”四、WinForm

MySQL ORDER BY 语句常见用法、示例详解

《MySQLORDERBY语句常见用法、示例详解》ORDERBY是结构化查询语言(SQL)中的关键字,隶属于SELECT语句的子句结构,用于对查询结果集按指定列进行排序,本文给大家介绍MySQL... 目录mysql ORDER BY 语句详细说明1.基本语法2.排序方向详解3.多列排序4.常见用法示例5.