登录别再手写i18n了！深入浏览器原生Intl对象（数字、日期、复数处理）
我们做前端，经常会遇到国际化（i18n）的需求。最常见的就是，如何根据用户的地区，显示不同格式的数字、货币和日期。
在不了解Intl对象之前，我们可能会写出这样的代码：
// 场景：显示商品价格
function formatPrice(price, currency) {
if (currency === 'USD') {
return '$' + price.toFixed(2);
} else if (currency === 'JPY') {
return '¥' + price.toFixed(0);
} else {
// 更多if...else...
return price;
}
}
这段代码不仅繁琐、难以维护，而且根本不严谨。比如，数字的千分位分隔符在不同国家是不一样的（美国用逗号,，德国用点.）。
为了解决这些问题，我们通常会引入一个庞大的第三方库，增加了项目的打包体积。
但实际上，浏览器已经给了我们一个“官方答案”——Intl对象。本文将带你深入了解这个原生API，看看如何用它来优雅地处理国际化需求，让你告别大部分手写i18n的繁琐工作。
数字格式化 (Intl.NumberFormat)：不只是加个千分位
这是Intl对象中最常用的功能之一。它可以根据不同的语言环境，格式化数字、货币、单位等。
1. 千分位处理
const number = 1234567.89;
// 美式英语
console.log(new Intl.NumberFormat('en-US').format(number));
// 输出: "1,234,567.89"
// 德语
console.log(new Intl.NumberFormat('de-DE').format(number));
// 输出: "1.234.567,89" (注意分隔符的区别)
2. 格式化货币、单位和百分比
Intl.NumberFormat的第二个参数是一个options对象，可以解锁更多强大的功能。
const price = 99.9;
// 格式化货币
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));
// 输出: "$99.90"
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price));
// 输出: "￥100" (日元会自动四舍五入到整数)
const speed = 120;
// 格式化单位
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer-per-hour' }).format(speed));
// 输出: "120 km/h"
console.log(new Intl.NumberFormat('zh-CN', { style: 'unit', unit: 'gigabyte', unitDisplay: 'long' }).format(100));
// 输出: "100吉字节"
const percentage = 0.85;
// 格式化百分比
console.log(new Intl.NumberFormat('en-US', { style: 'percent' }).format(percentage));
// 输出: "85%"
3. 紧凑数字格式
这个功能非常适合在UI空间有限的地方显示大数字。
const views = 123456;
console.log(new Intl.NumberFormat('en-US', { notation: 'compact' }).format(views));
// 输出: "123K"
console.log(new Intl.NumberFormat('zh-CN', { notation: 'compact' }).format(views));
// 输出: "12万"
日期和时间格式化 (Intl.DateTimeFormat)：date-fns的轻量替代
处理日期是另一个常见的痛点。Intl.DateTimeFormat提供了一套完整且灵活的解决方案。
1. 基础用法与预设样式
const date = new Date(); // 假设现在是 2025年7月25日
// 使用预设样式
console.log(new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(date));
// 输出: "Friday, July 25, 2025"
console.log(new Intl.DateTimeFormat('zh-CN', { dateStyle: 'long' }).format(date));
// 输出: "2025年7月25日"
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'short', timeStyle: 'short' }).format(date));
// 输出: "25/07/2025, 11:11" (英式日期格式)
2. 自定义格式与时区处理
你可以精确地控制你想显示的每一个部分。
const date = new Date();
const options = {
year: 'numeric', // "2025"
month: 'long', // "July" or "七月"
day: '2-digit', // "25"
weekday: 'short', // "Fri" or "周五"
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short',
timeZone: 'Asia/Taipei' // 关键！指定时区
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// 输出: "Fri, July 25, 2025 at 11:11:10 AM GMT+8"
console.log(new Intl.DateTimeFormat('zh-TW', options).format(date));
// 输出: "2025年7月25日 週五 上午11:11:10 GMT+8"
时区处理是Intl.DateTimeFormat的一大亮点，无需任何第三方库，就能准确地在不同时区之间转换和显示时间。
复数处理 (Intl.PluralRules)：终结 if (count > 1)
如何根据数量显示单数或复数？比如 "1 item" 和 "2 items"。在英语里，一个if (count > 1)似乎就解决了。但在其他语言里，复数规则远比这复杂（比如俄语、阿拉伯语有好几种复数形式）。
Intl.PluralRules就是用来解决这个问题的“标准答案”。它不会直接帮你拼接字符串，而是告诉你一个数字在特定语言环境下，属于哪种复数类别（"zero", "one", "two", "few", "many", "other"）。
// 以英语为例
const enPluralRules = new Intl.PluralRules('en-US');
console.log(enPluralRules.select(0)); // "other"
console.log(enPluralRules.select(1)); // "one"
console.log(enPluralRules.select(2)); // "other"
// 以波兰语为例，它的复数规则更复杂
const plPluralRules = new Intl.PluralRules('pl-PL');
console.log(plPluralRules.select(1)); // "one" (1)
console.log(plPluralRules.select(2)); // "few" (2, 3, 4)
console.log(plPluralRules.select(5)); // "many" (5, 6, ...)
用法：
const messages = {
zh: {
one: `有 {count} 个项目`,
other: `有 {count} 个项目`
},
en: {
one: `Found {count} item`,
other: `Found {count} items`
}
};
function getPluralMessage(locale, count) {
const langMessages = messages[locale];
const pluralRules = new Intl.PluralRules(locale);
const rule = pluralRules.select(count); // 获取复数类别
return langMessages[rule].replace('{count}', count); // 根据类别选择正确的字符串
}
console.log(getPluralMessage('en', 1)); // "Found 1 item"
console.log(getPluralMessage('en', 5)); // "Found 5 items"
相对时间格式化 (Intl.RelativeTimeFormat)
这也是一个非常实用的功能，用于显示“昨天”、“5分钟前”、“3周后”这种相对时间。
const rtf = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "昨天"
console.log(rtf.format(0, 'day')); // "今天"
console.log(rtf.format(2, 'hour')); // "2小时后"
console.log(rtf.format(-5, 'minute'));// "5分钟前"
Intl对象是浏览器提供的一套强大、标准且高效的国际化工具集。
下次再遇到国际化需求时，先别急着npm install。看一看浏览器原生的Intl对象，它可能已经为你准备好了更轻量、更标准的解决方案。
