JavaScript日期格式化与区域设置教程

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript本地化：日期格式化与区域设置》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

JavaScript 中的本地化依赖 Intl 对象，Intl.DateTimeFormat 可按 locale 格式化日期，如 'zh-CN' 输出“2025年4月5日 14:30”，'en-US' 输出“Apr 5, 2025”；Intl.NumberFormat 支持数字、货币格式化，如 'zh-CN' 显示为“1,234,567.89”，'de-DE' 为“1.234.567,89”，并可通过 currency 设置货币样式，如 CNY 显示“¥1,234,567.89”；通过 navigator.language 可动态获取用户语言环境实现自动适配；Intl API 在现代浏览器支持良好，旧版需引入 polyfill，且不同系统可能存在格式差异，关键场景应测试验证。

JavaScript 中的本地化处理，特别是在日期、数字格式化方面，依赖于 Intl 对象（ECMAScript 国际化 API）。它允许开发者根据用户的区域设置（locale）来格式化日期、时间、数字等，提升用户体验。

使用 Intl.DateTimeFormat 格式化日期

通过 Intl.DateTimeFormat 可以将日期对象按照指定语言环境格式化为本地化的字符串。

将日期按中文环境显示：

const date = new Date();
const formatter = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
console.log(formatter.format(date)); // 输出：2025年4月5日 14:30

若使用 'en-US'：

const usFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric'
});
console.log(usFormatter.format(date)); // 输出：Apr 5, 2025

支持的 locale 包括 'zh-TW'、'ja-JP'、'de-DE' 等，浏览器会尽量匹配用户系统或页面语言设置。

使用 Intl.NumberFormat 格式化数字

Intl.NumberFormat 可用于格式化数字、货币、百分比等，自动适配不同地区的习惯。

• 格式化千分位与小数点（中文习惯）：

const num = 1234567.89;
const zhNum = new Intl.NumberFormat('zh-CN').format(num);
console.log(zhNum); // 输出：1,234,567.89

• 格式化为德语（德语使用句点分隔千位，逗号表示小数）：

const deNum = new Intl.NumberFormat('de-DE').format(num);
console.log(deNum); // 输出：1.234.567,89

• 格式化货币（人民币）：

const yuan = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY'
}).format(num);
console.log(yuan); // 输出：¥1,234,567.89

• 美元格式：

const usd = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(num);
console.log(usd); // 输出：$1,234,567.89

动态获取用户区域设置

可通过 navigator.language 获取浏览器当前语言环境，用于自动适配格式化规则。

const userLang = navigator.language; // 如 'zh-CN' 或 'en-US'

const autoDate = new Intl.DateTimeFormat(userLang).format(new Date());
const autoNumber = new Intl.NumberFormat(userLang).format(1234.56);

这样可以实现“开箱即用”的本地化效果，无需手动判断。

注意事项与兼容性

Intl API 在现代浏览器中支持良好，但在一些旧版本（如 IE10 及以下）中不被支持。若需兼容，可引入 polyfill（如 @formatjs/intl）。

另外，某些 locale 的行为可能因操作系统或浏览器实现略有差异，建议在关键场景下进行测试。

基本上就这些。Intl 提供了简洁而强大的方式处理本地化格式化，合理使用能让应用更贴近全球用户习惯。

本篇关于《JavaScript日期格式化与区域设置教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！