前端开发必看：JavaScript 获取星期几的完整教程与实战要点-猿码集

1. 基础知识与原理

1.1 Date 对象与 getDay 的工作原理

在 JavaScript 中，获取星期几通常离不开 Date 对象。Date 对象封装了时间信息，而 getDay() 方法返回一个 0-6 的整数，其中 0 代表周日，1 代表周一，依此类推。获取星期几的核心在于先得到数字，再映射为文本，构成一个可用于 UI 的人类可读形式。

理解这个行为对于跨区域的日期计算很重要。跨浏览器的一致性在不同实现中大体一致，但仍需注意本地化显示时的差异。这里的核心要点是：先得到数值，再将其映射为文本。映射关系是后续步骤的基础。本文的目标是通过完整教程与实战要点，帮助你高效实现“获取星期几”的业务需求。

1.2 本地化显示 weekday 的多语言支持

要把星期几展示给用户，直接用数字不好看。利用 toLocaleDateString 或 Intl.DateTimeFormat 可以实现本地化显示。例如，zh-CN 区域通常以周几的中文名称呈现。本地化显示使你的应用在多语言环境下更友好。

选择合适的 locale 与选项，可以输出完整的星期名称、简写等。locale 与 options参数决定输出文本的语言和形式，因此在实现中应把用户区域作为核心条件。

// 使用 getDay() 获取星期几的数字
const date = new Date('2024-08-23');
const dayNum = date.getDay(); // 0 (周日) -> 6 (周六)

// 使用 Intl.DateTimeFormat 实现本地化的星期文本
const date = new Date('2024-08-23');
const weekdayLong = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date);
const weekdayShort = new Intl.DateTimeFormat('zh-CN', { weekday: 'short' }).format(date);
console.log(weekdayLong, weekdayShort);

2. 获取星期几的常用方法

2.1 使用 Date#getDay()

最直接的方式是通过 Date 对象的 getDay() 方法取得星期几的数字表示，再通过映射表转为文本。简单直观，适用于单一语言环境的快速实现。

代码分离了日期的生成与文本呈现，便于单元测试与复用。分离关注点 的设计原则有助于维护性。对于 UI 层，通常会先得到 dayIndex，再映射成显示文本。

// getDay + 映射示例（简化版）
const date = new Date();
const days = ['周日','周一','周二','周三','周四','周五','周六'];
console.log(days[date.getDay()]);

2.2 使用 Intl.DateTimeFormat 的本地化格式

对于多语言应用，直接使用 Intl.DateTimeFormat 可以无需手动映射，便可得到本地化文本。本地化优先，可让同一份代码在不同区域获得正确的输出。

示例展示如何输出中文的完整名称和缩写名称，以及在不同 locale 下的差异。locale 选择与 日期对象同样重要。

// getDay 的本地化替代输出
const date = new Date();
const name = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date);
console.log(name);

// 使用不同 locale 的快速对比
const date = new Date();
console.log(new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date)); // Monday
console.log(new Intl.DateTimeFormat('fr-FR', { weekday: 'long' }).format(date)); // lundi

3. 实战要点：把日期输入转化为星期几

3.1 处理用户输入的日期字符串

在表单中，用户可能输入日期文本，需要先将字符串解析为 Date 对象。输入校验、错误处理 与 有效性判断 是关键步骤，确保后续的星期几计算不被脏数据拖累。

常见做法是：先尝试用 new Date(string) 解析，若结果为 NaN，则提示用户重新输入；若解析成功，再进一步 получаем 星期几的文本表示。

// 从日期字符串解析并输出星期几（中文）
// 假设日期格式为 ISO 8601
function getWeekdayFromInput(dateString) {
  const date = new Date(dateString);
  if (isNaN(date)) {
    throw new Error('Invalid date');
  }
  return new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date);
}

console.log(getWeekdayFromInput('2024-08-28'));

// 处理时区偏差的简单策略
const dateString = '2024-08-28T16:00:00Z'; // UTC 时间
const date = new Date(dateString);
const weekday = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date);
console.log(weekday);

3.2 结合时区与本地化呈现

默认 Date 构造函数对时区敏感，若输入包含时区信息，解析结果会有所不同。使用 new Date(dateString) 或手动构造日期部分，可以更可靠地获取日期的星期几。时区一致性对用户体验至关重要。

为了用户友好，推荐统一的 本地化输出，如使用 Intl.DateTimeFormat 指定 locale。通过将字符串解析与格式化分离，便于在不同地区部署相同的业务逻辑。

// 将输入字符串解析后，统一输出本地化名称
function localWeekday(input, locale = 'zh-CN') {
  const date = new Date(input);
  if (isNaN(date)) throw new Error('Invalid date');
  return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);
}
console.log(localWeekday('2024-08-28', 'zh-CN'));

// 针对时区偏差的实用示例
const userInput = '2024-08-28T12:00:00-04:00'; // 用户提供的带时区的日期
const parsed = new Date(userInput);
console.log(new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(parsed));

4. 常见坑与解决方案

4.1 时区导致的星期显示偏差

如果未考虑时区，getDay() 的结果可能与本地预期不符。时区意识是前端时间处理的关键。跨时区的应用场景，尤其在日历、排班等功能中，必须确保日期计算的一致性。

解决方案包括：统一输入时区、使用 UTC 基准 进行计算，或直接使用带时区信息的文本解析。一致性的实现往往依赖于统一的日期规范与格式化 API。

// 统一以 UTC 进行星期计算的示例
function utcWeekday(dateInput) {
  const d = dateInput instanceof Date ? dateInput : new Date(dateInput);
  const utcDay = d.getUTCDay();
  const days = ['周日','周一','周二','周三','周四','周五','周六'];
  return days[utcDay];
}
console.log(utcWeekday('2024-08-28T04:00:00Z'));

4.2 不同浏览器对 date 的兼容性

不同浏览器对日期解析的实现存在细微差异，尤其在 缺省日期字符串 与 时区处理方面。为提升兼容性，建议优先使用 ISO 8601 字符串或统一的日期格式器。

通过使用 ISO 8601 字符串、以及 Intl.DateTimeFormat 的本地化 API，可以提高跨浏览器的输出一致性。

// 更稳妥的跨浏览器日期处理
function safeWeekday(dateInput, locale = 'zh-CN') {
  const d = typeof dateInput === 'string' ? new Date(dateInput) : dateInput;
  if (isNaN(d)) throw new Error('Invalid date');
  return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(d);
}

5. 实战示例：完整小工具函数

5.1 函数实现：getWeekday

下面给出一个可直接复用的函数，它接受日期输入或 Date 对象，返回本地化的星期文本。该实现强调健壮性、可重复使用性，以及对错误输入的保护。

通过将解析、校验和格式化解耦，得到的结果能够在 UI 层迅速利用，极大提升开发效率。下面的实现也便于单元测试，覆盖常见错误场景。

// 完整版 getWeekday 实用函数
function getWeekday(input, locale = 'zh-CN') {
  const date = input instanceof Date ? input : new Date(input);
  if (isNaN(date)) {
    throw new Error('Invalid date');
  }
  return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);
}

5.2 使用示例

将工具嵌入到页面或模块中，可以快速在 UI 中呈现用户友好的星期信息。通过传入不同日期，可以在同一个函数中获得一致的文本输出。

const today = new Date();
console.log(getWeekday(today)); // 例如: 星期三

前端开发必看：JavaScript 获取星期几的完整教程与实战要点