当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript日期格式化与区域设置教程

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

2026-01-30 19:42:40 0浏览收藏

学习知识要善于思考，思考，再思考！今天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本地化_日期数字格式化与区域设置

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);

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