JavaScript Intl.Locale 怎样补全脚本与地区子标签
如果你拿到的语言标识缺了脚本或者地区子标签,直接用原生的 Intl.Locale 实例的相关属性,就能自动补全符合 BCP 47 规范的完整标识,不用额外引入第三方国际化库处理映射关系。
如果拿到的只有 zh、en 这样的语言标签,却需要继续读取脚本和地区,直接访问 script 或 region 往往得到空值。解决方法是调用 Intl.Locale.prototype.maximize():它会依据 Unicode 的 likely subtags 规则,返回一个补出最可能 language、script、region 的新 Intl.Locale 对象。
例如,new Intl.Locale("zh").maximize().baseName 通常会得到 zh-Hans-CN,而 zh-TW 会得到以繁体脚本和台湾地区为核心的标签。这里的“最可能”是语言标签推断,不是读取用户真实位置,也不是替用户做语言偏好选择。
官方参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
先确认缺的是哪一层标签
Intl.Locale 把 Unicode locale identifier 拆成语言标识和扩展信息。语言标识的核心顺序是 language、script、region,baseName 只包含这部分核心名称;像日历、数字系统、时钟周期等内容则属于可选的扩展标签。
| 输入 | 可能的缺失项 | 适合观察的属性 |
|---|---|---|
zh | script、region | language、script、region |
zh-TW | script | baseName |
en-u-hc-h12 | language 标识之外的主标签 | toString() 与扩展属性 |

用 maximize 补出最可能的脚本和地区
最小写法只需要构造 Locale,再调用 maximize()。该方法没有参数,返回新的 Locale 实例,不会修改原对象,所以可以同时保留原始标签和补全后的结果。
const source = new Intl.Locale("zh");
const expanded = source.maximize();
// 读取核心语言标识,便于决定字体、排版或地区格式。
console.log({
original: source.baseName,
complete: expanded.baseName,
language: expanded.language,
script: expanded.script,
region: expanded.region,
});
// source 仍然保持为 "zh";maximize() 返回的是新对象。
console.log(source.baseName);
MDN 的示例展示了 en 可补为 en-Latn-US,ko 可补为 ko-Kore-KR。不要把这些值理解成硬编码映射表;它们来自语言标签的 likely subtags 数据,应用只应把结果当作“最可能的默认值”。
读取完整结果时不要混淆 baseName 和 toString
需要展示或传递完整语言标签时,用 toString();需要只比较语言、脚本和地区核心时,可读取 baseName。下面的函数同时返回两种结果,并保留输入中的 Unicode 扩展信息。
function describeLocale(tag) {
const locale = new Intl.Locale(tag);
const expanded = locale.maximize();
// baseName 只看 language-script-region,toString() 还会带上 -u 等扩展。
return {
input: locale.toString(),
baseName: expanded.baseName,
language: expanded.language,
script: expanded.script,
region: expanded.region,
fullTag: expanded.toString(),
};
}
console.log(describeLocale("fr-u-ca-gregory-hc-h12"));
例如输入包含 -u-ca-gregory-hc-h12 时,maximize() 只补语言标识的主标签,扩展部分仍然保留。若只打印 baseName,看不到日历和时钟周期;若要序列化完整 Locale,应使用 toString()。

把完整标签用于展示,把短标签用于存储
如果数据交换或界面展示需要明确脚本和地区,可以保存 expanded.toString();如果只需要一个尽可能短的等价语言标识,可以在已经完整的 Locale 上调用 minimize()。它会尝试移除调用 maximize() 时能够重新补出的主标签。
const detailed = new Intl.Locale("fr-Latn-FR-u-ca-gregory");
const compact = detailed.minimize();
// 只压缩语言、脚本和地区;日历扩展仍保留。
console.log(compact.baseName); // "fr"
console.log(compact.toString()); // "fr-u-ca-gregory"
// 需要明确默认地区时,优先保留 maximize() 的结果。
console.log(detailed.maximize().baseName);
常见误区是把 maximize() 当成浏览器语言检测器,或者把 script、region 的补全结果直接当成用户选择。更稳妥的做法是:把它用于默认格式、字体或资源选择;当用户明确选择了地区或脚本时,以用户输入覆盖推断结果。
常见问题
maximize() 会修改原来的 Locale 吗?
不会。它返回新的 Intl.Locale 实例,原对象的 baseName、script 和 region 保持不变。
为什么 maximize() 后仍然没有我想要的地区?
因为它给出的是最可能值,不是业务地区选择器。如果业务已经知道用户选择的是某个地区,应在构造 Locale 时显式写入 region,而不是依赖 likely subtags。
什么时候应该使用 minimize()?
当你希望在不丢失语义的前提下缩短语言标签时使用。展示诊断信息或跨系统传递时,通常先保留清晰的完整标签。
JavaScript Intl.DisplayNames 怎样显示语言与地区名称
- 上一篇
- JavaScript Intl.DisplayNames 怎样显示语言与地区名称
- 下一篇
- CSS font-variant-numeric 怎样对齐表格中的数字宽度
-
- 文章 · 前端 | 49分钟前 |
- CSS hyphens 为什么需要配合正确的 lang 属性
- 433浏览 收藏
-
- 文章 · 前端 | 50分钟前 | 前端 · javascript · JavaScript 字体加载 document.fonts.check FontFaceSet
- JavaScript document.fonts.check 为什么不等于指定字体已下载
- 290浏览 收藏
-
- 文章 · 前端 | 50分钟前 |
- JavaScript CSS Font Loading API 怎样只等待指定字体加载
- 235浏览 收藏
-
- 文章 · 前端 | 53分钟前 | 前端 · css · CSS hanging-punctuation 中文排版 标点悬挂
- CSS hanging-punctuation 怎样处理行首行尾标点悬挂
- 183浏览 收藏
-
- 文章 · 前端 | 55分钟前 |
- CSS text-emphasis 怎样给东亚文字添加着重标记
- 323浏览 收藏
-
- 文章 · 前端 | 58分钟前 |
- CSS font-synthesis 怎样限制浏览器生成伪粗体
- 286浏览 收藏
-
- 文章 · 前端 | 59分钟前 | 前端 · css · CSS font-variant-numeric tabular-nums 表格数字
- CSS font-variant-numeric 怎样对齐表格中的数字宽度
- 173浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- JavaScript Intl.DisplayNames 怎样显示语言与地区名称
- 124浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- CSS scrollbar-gutter 防止弹窗打开时页面横向跳动的设置方案
- 223浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- JavaScript Intl.ListFormat 怎样生成本地化并列文本
- 412浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- JavaScript Intl.Locale.getWeekInfo 怎样取得地区的周末定义
- 342浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- JavaScript Intl.DurationFormat 怎样把时长对象格式化为本地文本
- 401浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- PubMedQA
- 深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
- 778次使用
-
- H2O EvalGPT
- H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
- 773次使用
-
- LMArena
- LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
- 859次使用
-
- HELM
- 深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
- 824次使用
-
- MMBench
- MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
- 652次使用
-
- 将图片保存到mysql数据库并展示在前端页面的实现代码
- 2022-12-30 113浏览
-
- Go语言对前端领域的入侵WebAssembly运行原理
- 2022-12-31 130浏览
-
- golang 特殊字符的string怎么转成[]byte?
- 2023-01-07 170浏览
-
- 大家都是如何看开源代码的
- 2023-01-08 101浏览
-
- 设置cookie之后,刷新页面消失
- 2023-01-08 488浏览

