如何在JavaScript/TypeScript中获取OS语言及日期时间格式，不使用浏览器locale

核心结论 #

受限于浏览器沙箱安全限制，纯Web环境下没有办法直接读取操作系统原生的区域配置，所有前端能拿到的区域相关参数都是浏览器主动暴露给沙箱的，默认会同步OS配置，但如果浏览器的区域设置被管理员强制锁定和OS不一致，前端没有权限绕过浏览器直接读取底层OS数据。

可行落地方案 #

• 方案一：优先使用浏览器默认同步的OS配置
  大部分场景下，navigator.language 以及 Intl.DateTimeFormat().resolvedOptions().locale 返回的值就是操作系统的原生区域配置，只有用户/管理员手动修改了浏览器的语言优先级才会和OS不一致。Angular中可以直接通过注入LOCALE_ID来使用该值适配日期格式。
• 方案二：特征匹配反推OS区域配置
  如果确认浏览器的locale被强制锁死，可以通过Intl API生成标准日期的格式化结果，和已知的不同OS区域的日期格式特征做匹配，反推用户实际的OS区域。比如可以生成new Date(2024, 4, 20)的格式化结果，通过判断是月/日/年、日/月/年还是年/月/日的格式，以及分隔符类型，匹配对应的区域码。
• 方案三：用户手动选择区域（兼容性最好）
  针对无法自动匹配的场景，可以在应用首次加载时提供区域选择入口，将用户选择的配置存在localStorage中，后续直接读取该值作为格式化的依据，同时提供设置页入口允许用户随时修改。该方案完全不依赖浏览器/OS的默认配置，完全对齐用户的实际使用需求。

Angular 适配示例 #

你可以自定义LOCALE_ID的注入Provider，不需要修改原有日期格式化逻辑就能切换数据源：

import { LOCALE_ID, Provider } from '@angular/core';

export const CustomLocaleProvider: Provider = {
  provide: LOCALE_ID,
  useFactory: () => {
    // 优先读取本地存储的用户手动选择的locale
    const savedLocale = localStorage.getItem('user-preferred-locale');
    if (savedLocale) return savedLocale;
    // 其次读取浏览器暴露的默认locale（默认同步OS配置）
    return navigator.language || 'zh-CN';
  }
};

将上述Provider添加到AppModule的providers数组中即可，后续Angular自带的DatePipe、CurrencyPipe等都会自动使用你配置的locale完成格式化。

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