0

0

javascript日期对象怎么用_如何格式化和计算日期【教程】

狼影

狼影

发布时间:2026-01-29 15:46:57

|

286人浏览过

|

来源于php中文网

原创

JavaScript Date对象无内置格式化方法,月份索引从0开始(5表示6月),应优先用ISO字符串构造、toLocaleDateString或Intl.DateTimeFormat格式化,避免手拼与毫秒硬算,跨月计算宜用date-fns/dayjs,时区需明确UTC处理。

javascript日期对象怎么用_如何格式化和计算日期【教程】

JavaScript 的 Date 对象本身不提供内置格式化方法,直接调用 toString() 或拼接字符串极易出错——尤其涉及时区、月份索引从 0 开始、闰年、夏令时等隐性规则。别被“简单创建一个日期”误导,真正难的是让结果稳定可预期。

创建 Date 对象时,月份参数必须减 1

这是最常踩的坑:new Date(2024, 5, 1) 表示的是 **2024 年 6 月 1 日**,不是 5 月。因为月份(month)参数是 0~11 的索引值,0 = 一月,11 = 十二月。

常见错误场景:

  • 从表单输入“2024-05-01”解析后直接传入 new Date(2024, 05, 01) → 实际变成 6 月
  • getMonth() 取值后未 +1 就显示给用户 → 总是少一个月

安全做法:

立即学习Java免费学习笔记(深入)”;

  • 优先用 ISO 字符串构造:new Date('2024-05-01')(注意:必须是 YYYY-MM-DD 格式,带时区更稳)
  • 若需手动传参,明确注释:new Date(year, monthIndex, day) // monthIndex: 0-based
  • getMonth() 获取值后显示前务必 +1

格式化日期别手写拼接,用 toLocaleDateString 或 Intl.DateTimeFormat

手写 date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() 看似简单,但会崩在:月份/日期没补零、时区偏移未处理、国际化需求(如日本要「2024年5月1日」)。

推荐方案:

QIMI奇觅
QIMI奇觅

美图推出的游戏行业广告AI制作与投放一体化平台

下载
  • 快速本地化显示:date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })"2024-05-01"
  • 精确控制格式且兼容旧环境:new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
  • 避免 toISOString() 直接用于展示——它返回 UTC 时间,用户看到的可能比本地时间早或晚若干小时

日期计算别用毫秒加减硬算,用专门库或封装函数处理边界

想“给今天加 30 天”,写 date.getTime() + 30 * 24 * 60 * 60 * 1000 是错的:忽略每月天数不同、闰秒、夏令时切换(某些地区某天只有 23 小时)。例如 2024 年 1 月 31 日 + 1 个月 ≠ 2024 年 2 月 31 日(根本不存在)。

实际建议:

  • 简单偏移(如 +7 天)可用毫秒加减,但仅限“天”级且不跨月
  • 跨月/年操作,用 setMonth() / setFullYear(),并配合 getDate() 检查是否溢出(如 1 月 31 日设为 2 月 → 自动变成 3 月 2 日)
  • 生产环境强烈建议用 date-fns(轻量)或 dayjs(不可变):比如 addMonths(date, 1) 内部已处理月末逻辑

时区问题不声明就默认本地时区,部署到服务器大概率出错

Node.js 环境下 new Date() 默认用服务器系统时区,前端浏览器用用户本地时区。同一段代码,在上海和纽约运行,getHours() 返回值可能差 15 小时。

关键判断点:

  • 后端 API 返回的时间字符串带 Z(如 "2024-05-01T12:00:00Z")→ 是 UTC,用 new Date(str) 解析后所有 getter 方法返回的是本地等效时间
  • 需要统一按 UTC 处理?用 getUTCHours() / getUTCDate() 等系列方法
  • 存数据库或传 API 前,明确用 toISOString()(强制转 UTC)或 toUTCString(),别依赖 toString()

真正麻烦的从来不是“怎么创建一个日期”,而是“怎么确保这个日期在东京用户点击、伦敦服务器解析、旧版 iOS Safari 渲染时,都代表同一个物理时刻”。时区、历法、API 设计三者咬合极紧,任何一处松动都会让时间变成幽灵值。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

782

2023.07.31

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

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

434

2024.06.27

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

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

298

2023.08.03

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

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

212

2023.09.04

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

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

1501

2023.10.24

字符串介绍
字符串介绍

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

624

2023.11.24

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

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

633

2024.03.22

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

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

589

2024.04.29

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号