如何在JavaScript中根据Locale获取完整星期数组？

方案1：和Java DateFormatSymbols.getWeekdays() 完全一致的实现 #

此实现生成和你Java代码输出结构完全相同的数组：首元素为空字符串，后续按周日→周六的固定顺序返回本地化星期全名，仅名称随Locale变化。

function getLocalizedWeekdays(locale) {
  // 初始化日期为周日（2024-01-07），确保循环顺序为周日到周六
  const date = new Date(2024, 0, 7);
  // 创建指定Locale的日期格式化器，获取星期全名
  const formatter = new Intl.DateTimeFormat(locale, { weekday: 'long' });
  // 首元素为空字符串，对应Java输出的空值
  const weekdays = [''];

  for (let i = 0; i < 7; i++) {
    weekdays.push(formatter.format(date));
    date.setDate(date.getDate() + 1);
  }

  return weekdays;
}

测试示例：

// 英语（美国）Locale
console.log(getLocalizedWeekdays('en-US'));
// 输出：["", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

// 德语Locale
console.log(getLocalizedWeekdays('de-DE'));
// 输出：["", "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]

方案2：遵循Locale一周起始顺序的实现 #

满足你要求的「Locale影响星期列表起始顺序」，会根据不同Locale的一周起始日（如德国周一、美国周日、沙特阿拉伯周六）调整数组顺序，无硬编码数据，完全依赖系统本地化规则。

function getLocalizedWeekdaysWithLocaleStart(locale) {
  // 获取当前Locale的一周起始日：0=周日，1=周一，6=周六
  const localeInfo = new Intl.Locale(locale);
  const firstDayOfWeek = localeInfo.weekInfo.firstDay;

  // 生成周日到周六的本地化星期名称数组
  const date = new Date(2024, 0, 7); // 起始为周日
  const formatter = new Intl.DateTimeFormat(locale, { weekday: 'long' });
  const baseWeekdays = [];

  for (let i = 0; i < 7; i++) {
    baseWeekdays.push(formatter.format(date));
    date.setDate(date.getDate() + 1);
  }

  // 调整数组顺序，让Locale指定的一周起始日作为数组第一个元素
  return [
    ...baseWeekdays.slice(firstDayOfWeek),
    ...baseWeekdays.slice(0, firstDayOfWeek)
  ];
}

测试示例：

// 德国Locale（一周从周一开始）
console.log(getLocalizedWeekdaysWithLocaleStart('de-DE'));
// 输出：["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]

// 美国Locale（一周从周日开始）
console.log(getLocalizedWeekdaysWithLocaleStart('en-US'));
// 输出：["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

// 沙特阿拉伯Locale（一周从周六开始）
console.log(getLocalizedWeekdaysWithLocaleStart('ar-SA'));
// 输出：["السبت", "الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة"]

React.js 组件使用示例 #

将上述函数集成到React组件中，支持动态切换Locale：

import { useState, useEffect } from 'react';

function WeekdaysSelector() {
  const [selectedLocale, setSelectedLocale] = useState('en-US');
  const [weekdays, setWeekdays] = useState([]);

  useEffect(() => {
    // 可根据需求切换方案1或方案2的函数
    setWeekdays(getLocalizedWeekdays(selectedLocale));
  }, [selectedLocale]);

  return (
    <div className="weekdays-container">
      <label>选择Locale：</label>
      <select
        value={selectedLocale}
        onChange={(e) => setSelectedLocale(e.target.value)}
      >
        <option value="en-US">English (US)</option>
        <option value="de-DE">German (DE)</option>
        <option value="fr-FR">French (FR)</option>
        <option value="zh-CN">Chinese (CN)</option>
      </select>

      <h3>星期列表：</h3>
      <ul>
        {weekdays.map((day, index) => (
          <li key={index}>{day || '(空元素)'}</li>
        ))}
      </ul>
    </div>
  );
}

// 引入对应方案的函数
function getLocalizedWeekdays(locale) {
  const date = new Date(2024, 0, 7);
  const formatter = new Intl.DateTimeFormat(locale, { weekday: 'long' });
  const weekdays = [''];

  for (let i = 0; i < 7; i++) {
    weekdays.push(formatter.format(date));
    date.setDate(date.getDate() + 1);
  }

  return weekdays;
}

export default WeekdaysSelector;

说明 #

• 无需额外依赖：使用浏览器/Node.js原生Intl API，完全免费开源，无硬编码本地化数据，避免维护成本。
• 兼容性：支持所有现代浏览器（Chrome 24+、Firefox 29+、Safari 10+）及Node.js 10+，若需兼容旧环境可引入@formatjs/intl-datetimeformat polyfill。
• 两种方案可根据实际需求选择：若需和后端Java输出完全对齐选方案1，若需遵循Locale本地习惯的星期顺序选方案2。

内容的提问来源于stack exchange，提问作者Binyamin Regev