JavaScript Academy · 课时

相对时间与复数形式

Q: 「相对时间与复数形式」这节课中我会学到什么？

使用 RelativeTimeFormat 和 PluralRules。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 RelativeTimeFormat 和 PluralRules。

相对时间与复数形式 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

Intl.RelativeTimeFormat

Intl.RelativeTimeFormat 会用用户的语言生成“3 天前”或“2 小时后”等短语。

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour"));  // "in 2 hours"

负数表示过去，正数表示未来

数值的符号决定时间方向：负数表示过去，正数表示未来。

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"

numeric 选项

numeric: "auto" 会使用“昨天”或“明天”等符合语言习惯的词语，而不是“1 天前”。

const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day"));  // "today"

本地化相对时间

切换区域设置后，整个短语会自动翻译。

console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"

选择合适的单位

实际应用会选择合理的最大单位。请先以秒计算差值，再逐级转换为更小的单位。

function ago(date) {
  const diff = (date - Date.now()) / 1000;
  const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
  if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
  if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
  return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));

Intl.PluralRules

复数形式并不只是加上“s”。Intl.PluralRules 会根据语言，将一个数字映射到 "one" 或 "other" 等类别。

const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"

构建复数消息

使用类别来选择正确的词语。

const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"

具有更多形式的语言

许多语言有多个复数类别。例如，波兰语区分 "few" 和 "many"，硬编码的英语逻辑会因此出错。

const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"

序数形式

传入 type: "ordinal"，即可获得 1st、2nd、3rd 等序数对应的类别。

const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11th

与数字结合使用

将 PluralRules 与 NumberFormat 配合使用，即可生成完全本地化的计数消息。

const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"

Intl.ListFormat

另外，Intl.ListFormat 会使用符合区域设置的连接词连接各个项目。

const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"

快速检查

测试相对时间和复数形式。

回顾：相对时间与复数形式

您使用 RelativeTimeFormat 格式化了相对时间（包括 numeric: "auto"），选择了单位阈值，使用 PluralRules 跨语言正确处理了复数形式和序数形式，并使用 ListFormat 连接了列表。接下来学习：区域设置感知的排序。

常见问题解答

「相对时间与复数形式」课时是免费的吗？

是的 — 「相对时间与复数形式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「相对时间与复数形式」这节课中我会学到什么？

使用 RelativeTimeFormat 和 PluralRules。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「相对时间与复数形式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy