讲师中心 微信公众号
AI工具推荐 视频效率加速

如何使用JavaScript处理日期与时间【教程】

轻浩姑娘_4281

轻浩姑娘_4281

发布时间:2026-01-17 11:54:37

|

645人浏览过

|

来源于php中文网

原创

JavaScript Date对象存在时区、解析和格式化缺陷,如ISO字符串被默认解析为UTC导致跨时区偏差,推荐显式指定时区或用Date.UTC构造,加减操作应避免直接修改原对象并注意夏令时影响,格式化宜手动拼接或使用date-fns等库。

如何使用javascript处理日期与时间【教程】

JavaScript 的 Date 对象本身不提供格式化、时区转换或相对时间计算等常用能力,直接用它做业务逻辑容易出错——尤其在跨时区、夏令时、日期加减或字符串解析场景下。

为什么 new Date('2023-10-01') 在某些浏览器里变成 9 月 30 日?

这是因为 ISO 格式字符串(如 '2023-10-01')被解析为 UTC 时间,再转成本地时区显示。例如在中国(UTC+8),new Date('2023-10-01') 实际表示的是 UTC 时间 2023-10-01T00:00:00,对应北京时间 2023-10-01T08:00:00 —— 看起来没问题;但若传入 '2023-10-01T00:00:00'(带时间部分却无时区),不同浏览器可能按本地时区或 UTC 解析,导致不一致。

  • 安全做法:显式指定时区,比如 new Date('2023-10-01T00:00:00+08:00')
  • 更稳妥方案:用 new Date(Date.UTC(2023, 9, 1)) 构造 UTC 时间(注意月份是 0 起始)
  • 避免依赖字符串解析,尤其是用户输入或后端返回的日期字段

如何正确做「今天 + 7 天」这种计算?

直接改 date.setDate(date.getDate() + 7) 是可行的,但要注意它会**修改原对象**,且不处理跨月/跨年边界(其实会自动处理,但易被忽略)。更大的问题是:它基于本地时区,若需服务端对齐或跨时区一致性,应统一用 UTC 计算。

const date = new Date();
// ✅ 安全的本地时间加法(修改原对象)
date.setDate(date.getDate() + 7);
<p>// ✅ 更清晰、不污染原对象的方式
const nextWeek = new Date(date);
nextWeek.setDate(nextWeek.getDate() + 7);</p><p>// ⚠️ 错误示例:date.getTime() + 7 <em> 24 </em> 60 <em> 60 </em> 1000 可能因夏令时偏移失效(如某地 DST 开始当天只有 23 小时)</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill5249" title="Aria2 Json Rpc"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179041153631575.jpg" alt="Aria2 Json Rpc"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill5249" title="Aria2 Json Rpc">Aria2 Json Rpc</a>
                                                                        <p>通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。</p>
                                                                </div>
                                                                <a href="/xiazai/skill5249" title="Aria2 Json Rpc" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记(深入)</a></a>”;</p>

如何把 Date 输出成 '2023-10-01 14:30' 这种格式?

Date.prototype.toLocaleString() 和 toISOString() 都有局限:toISOString() 固定输出 UTC 时间并带 Z 后缀;toLocaleString() 行为依赖运行环境语言和地区设置,不可控。

  • 推荐用 date.getFullYear()、date.getMonth() + 1 等手动拼接,确保格式稳定
  • 需要兼容老浏览器时,注意 date.toISOString() 在 IE8 及以下不可用
  • 若项目已引入 moment 或 date-fns,优先用它们的格式化函数(如 format(date, 'yyyy-MM-dd HH:mm')),避免手写逻辑
function formatDateTime(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const H = String(date.getHours()).padStart(2, '0');
  const M = String(date.getMinutes()).padStart(2, '0');
  return `${y}-${m}-${d} ${H}:${M}`;
}

时区问题最常踩的三个坑

几乎所有线上日期 bug 都和时区有关,尤其当后端用 UTC 存储、前端又用本地时间渲染时。

  • 后端返回时间戳(如 1696118400000)是绝对值,new Date(1696118400000) 总是正确解析为对应 UTC 时间点的本地显示 —— 这个没问题
  • 后端返回字符串 '2023-10-01T00:00:00' 没有时区标识,JS 会按本地时区解释,导致欧美用户看到的是 10 月 1 日凌晨,而日本用户看到的是 10 月 1 日上午 9 点
  • 调用 date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' }) 并不能改变时间值本身,只是影响显示格式;若想把一个时间“当作”东八区时间来解析,必须先构造为该时区的 Date 对象(实际需借助 Intl.DateTimeFormat 或第三方库)

真正棘手的不是怎么写,而是搞清你操作的时间到底代表什么:是用户本地钟表上的时刻?还是服务器所在时区的瞬间?还是全球统一的 UTC 时间点?没理清这个,后面所有格式化、加减、比较都会埋雷。

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1609

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1211

2024.06.27

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1578

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2284

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

5804

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

4929

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

6654

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

8994

2024.04.29

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

160

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn