0

0

JavaScript中获取可用时区名称列表

DDD

DDD

发布时间:2025-10-31 12:01:15

|

678人浏览过

|

来源于php中文网

原创

JavaScript中获取可用时区名称列表

本教程将介绍如何在javascript环境中获取一个标准的时区名称列表。针对从moment.js迁移到day.js后寻找时区列表方法的场景,我们将利用web api `intl.supportedvaluesof('timezone')` 提供一个无需外部库的解决方案,并详细说明其使用方法、输出格式及相关注意事项。

在开发涉及全球用户的应用程序时,经常需要提供一个时区选择器,或者根据用户所在时区显示时间。以往,一些流行的日期时间处理库如Moment.js提供了直接获取时区列表的功能。然而,当开发者转向更轻量级的库如Day.js时,可能会发现此类功能并非直接集成在核心库中。本文将介绍一种现代、标准且无需额外依赖的JavaScript方法来获取可用的时区名称列表。

使用 Intl.supportedValuesOf 获取时区列表

JavaScript的Intl对象提供了对国际化API的访问,其中包括了获取本地化相关信息的强大功能。Intl.supportedValuesOf()方法是其中一个非常有用的API,它允许我们查询给定类别的可用值。对于时区,我们可以使用'timeZone'作为参数来获取一个标准的时区名称列表。

以下代码展示了如何在浏览器控制台或其他JavaScript环境中执行此操作:

/**
 * 获取所有支持的时区名称列表
 * @returns {string[]} 一个包含所有IANA时区名称的数组
 */
function getTimeZoneNameList() {
  // 使用Intl.supportedValuesOf('timeZone')获取标准时区名称列表
  const timeZones = Intl.supportedValuesOf('timeZone');
  return timeZones;
}

// 在控制台打印所有时区名称
const zoneList = getTimeZoneNameList();
console.log("支持的时区名称列表:");
zoneList.forEach(zone => console.log(zone));

// 如果需要一个更紧凑的列表,可以根据需求进行过滤或分组
// 例如,只获取包含特定地区的时区
const specificRegions = zoneList.filter(zone => 
  zone.startsWith('America/') || zone.startsWith('Europe/')
);
console.log("\n部分地区时区示例:");
specificRegions.forEach(zone => console.log(zone));

代码解析:

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

  • Intl.supportedValuesOf('timeZone') 方法会返回一个字符串数组,其中每个字符串都代表一个标准的时区名称。
  • 这些时区名称遵循 IANA 时区数据库 命名约定(例如:"America/New_York", "Europe/London", "Asia/Shanghai")。
  • 此方法是浏览器原生的Web API,因此不需要引入任何第三方库即可使用。

输出格式与特点

Intl.supportedValuesOf('timeZone') 返回的列表包含了全球所有标准时区的完整名称。这些名称是唯一的,并且能够准确地表示一个地理区域及其所有历史和未来的夏令时(DST)规则。

动易拍卖程序
动易拍卖程序

功能与改进:后台新增功能:语言设置中增:繁体中文版,适合港澳台地区使用(英文版随后增加)页面广告中增:浮动文字广告,可以自己随心修改广告内容啊商品列表页面增:对商品名称可以将商品加粗,加粗加红显示,来推荐用户的商品增加邮件服务功能:对所有涉及到发送邮件的页面,都使用了邮件发送程序使程序更加的完善另外增加了对browse.asp页显示分类的管理更正了已知BUG

下载
  • 完整性: 列表非常全面,涵盖了全球范围内的所有主要时区。
  • 标准化: 采用的是国际上公认的IANA时区数据库命名规范。
  • 包含夏冬时制: 每个时区名称都隐式包含了其所在地区的夏令时(或冬令时)转换规则,无需额外处理。当使用这些名称配合日期时间库(如Day.js的dayjs-timezone插件)进行时间转换时,库会自动处理夏令时。
  • 非紧凑性: 原始列表可能包含数百个条目,对于某些应用场景可能显得过于冗长。用户可以根据实际需求对这个列表进行过滤或分组,例如只显示特定大陆或国家/地区的时区。

优势与注意事项

  1. 原生Web API,无需依赖: 最大的优势在于它是浏览器内置的功能,不需要安装任何额外的JavaScript库或插件。这有助于减小项目体积,并减少潜在的依赖冲突。

  2. 自动更新,包含夏冬时制: 浏览器或运行时环境会负责维护和更新其内部的时区数据。这意味着开发者无需手动更新时区数据,并且列表中的每个时区名称都已考虑了其对应的夏令时(DST)规则。

  3. 浏览器兼容性: Intl.supportedValuesOf 是一个相对较新的API(ES2020),但在现代浏览器(如Chrome 79+, Firefox 74+, Safari 13.1+, Edge 79+)中已得到广泛支持。在旧版浏览器中可能需要Polyfill。

  4. 与Day.js的关系: 值得注意的是,Day.js核心库本身并没有提供获取时区列表的功能。它主要专注于日期时间的解析、格式化和操作。如果你需要Day.js来处理特定时区的时间,通常会结合其官方的 dayjs-timezone 插件。Intl.supportedValuesOf('timeZone') 提供的时区名称列表,可以完美地作为 dayjs-timezone 插件的输入。例如:

    // 假设你已经安装并加载了 dayjs 和 dayjs-timezone 插件
    // import dayjs from 'dayjs';
    // import utc from 'dayjs/plugin/utc';
    // import timezone from 'dayjs/plugin/timezone';
    
    // dayjs.extend(utc);
    // dayjs.extend(timezone);
    
    const newYorkTimeZone = 'America/New_York';
    const nowInNewYork = dayjs().tz(newYorkTimeZone);
    console.log(`纽约当前时间:${nowInNewYork.format('YYYY-MM-DD HH:mm:ss Z')}`);

总结

尽管从Moment.js切换到Day.js后,直接获取时区列表的方式有所不同,但JavaScript提供了强大且原生的Intl.supportedValuesOf('timeZone')方法来解决这一问题。这个API不仅提供了完整的、标准化的时区名称列表,而且无需任何第三方依赖,并能自动处理夏令时规则。开发者可以利用此方法获取时区列表,并根据实际需求进行筛选和展示,再结合Day.js等日期时间库进行精确的时区时间处理。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

544

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

393

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

654

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

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

相关下载

更多

精品课程

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

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

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

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