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

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取