Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
怎样使用 JavaScript 的 Intl 对象实现精准的国际化与本地化?_创想鸟

怎样使用 JavaScript 的 Intl 对象实现精准的国际化与本地化?

Intl对象通过DateTimeFormat、NumberFormat、Collator和RelativeTimeFormat实现日期、数字、排序和相对时间的本地化处理,提升多语言用户体验。

怎样使用 javascript 的 intl 对象实现精准的国际化与本地化?

JavaScript 的 Intl 对象是处理国际化(i18n)和本地化(l10n)的核心工具,它提供了一系列构造函数来格式化日期、时间、数字、货币以及字符串排序等,确保应用在不同语言和地区下显示正确。合理使用 Intl 能让用户体验更自然、更符合本地习惯。

1. 格式化日期与时间

使用 Intl.DateTimeFormat 可以根据用户所在地区格式化时间日期,避免手动拼接字符串带来的错误。

示例:

const date = new Date();// 中文环境下显示为“2025年4月5日”const zhFormatter = new Intl.DateTimeFormat('zh-CN', {  year: 'numeric',  month: 'long',  day: 'numeric'});console.log(zhFormatter.format(date)); // 输出:2025年4月5日// 美式英语环境下显示为“April 5, 2025”const enFormatter = new Intl.DateTimeFormat('en-US', {  year: 'numeric',  month: 'long',  day: 'numeric'});console.log(enFormatter.format(date)); // 输出:April 5, 2025

你可以通过 navigator.language 获取用户浏览器默认语言,动态适配格式。

2. 数字与货币格式化

Intl.NumberFormat 支持千分位分隔符、小数精度控制,还能按地区显示货币符号。

立即学习“Java免费学习笔记(深入)”;

示例:

const number = 1234567.89;// 德国格式:1.234.567,89 €const deFormatter = new Intl.NumberFormat('de-DE', {  style: 'currency',  currency: 'EUR'});console.log(deFormatter.format(number)); // 输出:1.234.567,89 €// 日本格式:¥1,234,568(四舍五入)const jaFormatter = new Intl.NumberFormat('ja-JP', {  style: 'currency',  currency: 'JPY'});console.log(jaFormatter.format(number)); // 输出:¥1,234,568// 印度格式使用 lakhs/crores 分隔const hiFormatter = new Intl.NumberFormat('en-IN', {  maximumFractionDigits: 0});console.log(hiFormatter.format(1000000)); // 输出:10,00,000

3. 排序与字符串比较

不同语言的字母排序规则不同,比如瑞典语中 “ö” 在 “z” 之后。使用 Intl.Collator 可实现正确的本地化排序。

示例:

const names = ['Ölson', 'Adam', 'Zoe', 'Anders'];// 英语环境下,ö 按 o 处理const enCollator = new Intl.Collator('en-US');names.sort(enCollator.compare);console.log(names); // ['Adam', 'Anders', 'Ölson', 'Zoe']// 瑞典语环境下,ö 在 z 后const svCollator = new Intl.Collator('sv-SE');names.sort(svCollator.compare);console.log(names); // ['Adam', 'Anders', 'Zoe', 'Ölson']

4. 相对时间格式化

Intl.RelativeTimeFormat 可将时间差转换为“昨天”、“2分钟前”这类自然表达。

示例:

const rtf = new Intl.RelativeTimeFormat('zh-CN', {  numeric: 'auto'});console.log(rtf.format(-1, 'day'));   // 输出:昨天console.log(rtf.format(2, 'week'));   // 输出:两周后console.log(rtf.format(-3, 'hour'));  // 输出:3小时前

适合用于消息列表、动态更新的时间标签等场景。

基本上就这些核心用法。Intl 提供了标准化的方式处理多语言环境下的数据展示问题,避免依赖外部库也能实现精准本地化。关键是根据用户的语言环境(language tag)选择合适的选项,并测试边缘情况如阿拉伯语从右到左排版是否影响布局。不复杂但容易忽略细节。

以上就是怎样使用 JavaScript 的 Intl 对象实现精准的国际化与本地化?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1525422.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何用JavaScript进行计算机视觉的基本处理?
上一篇 2025年12月20日 17:40:13
如何通过JavaScript实现颜色拾取器?
下一篇 2025年12月20日 17:40:25

相关推荐

  • VSCode 怎样自定义代码运行的动画效果 VSCode 代码运行动画效果的自定义方法​

    vscode本身不支持电影特效式的自定义代码运行动画,其核心设计注重功能与效率;2. 实现更生动的视觉反馈主要依赖内置机制和扩展:状态栏指示器、输出面板滚动、调试高亮等是默认反馈方式;3. 可通过安装测试运行器扩展(如jest runner、python test explorer)实现测试进度条、…

    2026年9月22日
    000
  • AffinityDesigner如何导出AI生成的矢量图片?保存图像的步骤

    答案是选择合适的矢量格式并调整导出设置。在Affinity Designer中导出AI生成的矢量图时,应根据用途选择SVG(适用于Web)、PDF(适用于打印和跨平台分享)或EPS(适用于老旧系统);导出前需检查文本是否转曲、颜色模式是否正确,并优化路径与位图设置以平衡质量与文件大小;从其他AI工具…

    2026年9月22日
    000
  • win11怎么用命令行修复系统文件_win11命令行修复系统文件操作教程

    首先使用SFC扫描修复系统文件,若失败则用DISM修复系统映像,严重损坏时执行systemreset重置系统,无法启动时重建BCD,最后通过日志分析具体问题。 如果您发现Windows 11系统运行异常、程序无法启动或出现错误提示,可能是由于系统文件损坏或丢失所致。命令行工具提供了强大的修复功能,可…

    2026年9月22日
    100
  • qq浏览器如何设置字体大小_qq浏览器网页字体大小调整方法

    进入QQ浏览器设置,点击右上角菜单选择“设置”;2. 找到“字体大小”选项,选择极小至超大中的合适档位;3. 调整后刷新网页即可生效,手机端支持更完整,电脑端依赖缩放功能。 QQ浏览器调整网页字体大小非常简单,可以通过内置的设置功能快速完成。以下是具体操作方法: 进入浏览器设置 打开QQ浏览器,点击…

    2026年9月22日
    400
  • 零度曙光生活等级快速提升攻略

    零度曙光生活等级快速提升攻略零度曙光生活等级快速提升攻略零度曙光生活等级快速提升攻略零度曙光生活等级快速提升攻略

    在《零度曙光》这款游戏中,玩家需要不断提升多种类型的等级,其中生活等级的快速提升是许多新人玩家关注的重点。以下是关于如何高效提升生活等级的详细攻略,供有需要的玩家参考。 零度曙光生活等级快速升级技巧 1、使用生活技能经验与加速增益药水 生活技能经验药水:使用后可使采集或制造过程中获得的生活技能经验提…

    2026年9月22日 • 用户投稿
    200
  • MySQL安装后初始密码在哪里查看?

    MySQL安装后初始密码在哪里查看?MySQL安装后初始密码在哪里查看?MySQL安装后初始密码在哪里查看?MySQL安装后初始密码在哪里查看?

    mysql安装后的初始密码取决于安装方式和操作系统,通常可在错误日志中找到。1. 查看mysql错误日志:linux系统使用grep命令查找/var/log/mysqld.log或类似路径;windows系统在data目录下的hostname.err中搜索“temporary password”。2…

    2026年9月22日 • 用户投稿
    100
  • windows8开机黑屏只有鼠标怎么办_windows8黑屏故障处理方法

    首先重启Windows资源管理器或手动运行explorer.exe;若无效,通过强制关机三次进入安全模式排查软件冲突;接着使用sfc /scannow和DISM命令修复系统文件;最后检查注册表中Winlogon项的Shell值是否为explorer.exe并修复。 如果您成功登录Windows 8系…

    2026年9月22日
    200
  • 抖音补差价在哪里?抖音保价在哪里

    短视频平台抖音以其独特的内容形式和庞大的用户基础,成为众多商家争相入驻的热土。在如此激烈的竞争环境下,如何通过有效策略提升销量与利润,是每位商家必须思考的问题。本文将重点解析抖音补差价的相关操作与策略,并介绍保价服务的位置及使用方法。 一、抖音补差价的核心逻辑 1. 补差价含义 所谓补差价,指的是商…

    2026年9月22日
    200
  • 如何在RunwayML导出AI生成的4K图片?保存高清图像的教程

    要从RunwayML获得4K图像,需结合高分辨率生成设置与AI放大工具。首先在RunwayML中选择最高可用分辨率(如1024×1024或更高),并通过精细提示词和负面提示词优化生成质量;随后利用内置增强功能或外部AI放大工具(如Topaz Gigapixel AI、Upscayl)将图像…

    2026年9月22日
    100
  • 悟空浏览器如何禁用后台应用程序刷新_悟空浏览器关闭后台应用活动设置方法

    1、关闭自动刷新:进入悟空浏览器设置→浏览设置→关闭“点击返回键获取新资讯”;2、禁用广告与推送:在隐私设置中关闭程序化与个性化广告展示,并关闭推送通知;3、启用无痕浏览:通过多窗口界面开启无痕模式,限制后台数据刷新与存储行为。 如果您在使用悟空浏览器时发现应用在后台持续消耗流量或电量,可能是由于后…

    2026年9月22日
    100
  • 地下城堡4骑士与破碎编年史英雄常识与搭配养成思路

    地下城堡4骑士与破碎编年史英雄常识与搭配养成思路地下城堡4骑士与破碎编年史英雄常识与搭配养成思路地下城堡4骑士与破碎编年史英雄常识与搭配养成思路地下城堡4骑士与破碎编年史英雄常识与搭配养成思路

    在《地下城堡4:骑士与破碎编年史》中,新人玩家如何快速入门?这份实用攻略一定要看!英雄招募有门道,金币宝石刷声望,遇见“酒桶”别错过;名字带“星”的英雄唯一获取,普通英雄可重复拥有。更关键的是——英雄等级共享、秘宝属性加成全队通用,材料来了直接升级,毫无后顾之忧!立即掌握英雄搭配与养成新策略! 地下…

    2026年9月22日 • 用户投稿
    200
  • 抖音来客上怎么修改个人简介?抖音来客如何编辑个人简介的步骤

    抖音来客作为一个活跃的社交平台,为众多用户提供了展示自我、互动交友的机会。而个人简介作为展示个人形象的重要部分,其作用不容忽视。那么,如何优化个人简介以获得更多关注呢?下面将为您详细介绍。 一、关键词的选择与使用 1. 展现个性特征 在撰写个人简介时,关键词的选择非常关键,应当能够体现自己的个性特征…

    2026年9月22日
    100
  • PHP数组如何定义和使用_PHP数组定义与使用详细教程

    PHP数组是存储和管理多个值的核心工具,支持索引、关联、混合及多维结构;通过方括号定义,可灵活访问、修改、添加或删除元素,并利用foreach高效遍历。 PHP数组是存储一系列值的强大工具,无论这些值是简单的数据项,还是更复杂的结构。它的核心思想就是把一堆相关的数据“打包”在一起,通过一个统一的名字…

    2026年9月22日
    000
  • Java中递归处理列表:排序验证与条件性最大值移除策略

    在处理列表数据时,我们常遇到需要根据特定条件修改列表的需求。本教程将深入探讨一个具体的场景:如何设计一个递归函数,该函数首先判断一个整数列表是否已按升序排序。如果列表已排序,则停止处理;如果未排序,则进一步检查列表中的最大值。仅当最大值位于列表的起始位置或末尾时,才将其移除,并对修改后的列表重复此过…

    2026年9月22日
    000
  • win11小组件加载不出来怎么办_win11小组件无法加载修复教程

    首先检查网络连接与微软账户状态,确保网络畅通并登录有效账户;随后通过管理员终端卸载并重装Windows Web Experience Pack组件;接着在Internet选项中启用TLS 1.1和TLS 1.2协议;最后可尝试禁用集成显卡以排除渲染冲突,重启电脑验证小组件是否恢复正常。 如果您尝试打…

    2026年9月22日
    100
  • VSCode 如何配置 Python 虚拟环境 VSCode 配置 Python 虚拟环境的步骤​

    VSCode 如何配置 Python 虚拟环境 VSCode 配置 Python 虚拟环境的步骤​VSCode 如何配置 Python 虚拟环境 VSCode 配置 Python 虚拟环境的步骤​VSCode 如何配置 Python 虚拟环境 VSCode 配置 Python 虚拟环境的步骤​VSCode 如何配置 Python 虚拟环境 VSCode 配置 Python 虚拟环境的步骤​

    在vscode中配置python虚拟环境的核心是选择正确的解释器,确保项目依赖隔离;2. 首先在项目根目录使用python -m venv .venv创建虚拟环境,或使用conda、pipenv等工具;3. 在vscode中打开项目文件夹,通过ctrl+shift+p输入“python: selec…

    2026年9月22日 • 用户投稿
    100
  • 密码管理器是否真的安全?它是否可能成为单点故障?

    密码管理器通过端到端加密、零知识架构和AES-256加密保障安全,主密码是唯一解锁钥匙。它确为单点故障,但风险可控。合理选择经审计的产品、设置强主密码、启用2FA、定期备份并防范钓鱼,可显著提升安全性。相比弱密码或明文记录,正确使用密码管理器更安全,是应对复杂账户体系的有效防线。 密码管理器在当今数…

    2026年9月22日
    200
  • 百家号发文章在哪里发?百家号的文章都发到哪里去了

    百家号作为一个集内容创作、阅读与互动为一体的平台,吸引了大量创作者加入。如何在该平台上发布一篇高质量的内容,从而吸引更多读者关注,是众多创作者关心的话题。本文将围绕关键词规划、内容撰写以及发布策略等方面,提供一份详细的百家号内容发布指南,帮助你在百家号上展现风采。 一、关键词布局 1. 确定核心关键…

    2026年9月22日
    300
  • Pictory如何快速生成AI视频?从文本到AI视频的完整教程

    Pictory通过智能算法将文字脚本转化为专业AI视频,核心在于自动分析文本、匹配视觉素材、生成语音并初步剪辑。用户登录后选择“Script to Video”,粘贴结构清晰的脚本,AI会自动分割场景并推荐素材,支持手动调整场景划分、替换素材、上传自定义图片视频以增强品牌一致性。平台提供多语言AI语…

    2026年9月22日
    000
  • 苹果15卡槽如何装卡

    在开始之前,先准备好必要的工具。你需要一张适用于苹果15的nano-sim卡,确保该卡支持设备所兼容的网络制式。此外,还需一根取卡针,通常随手机包装附赠,可在盒内找到。 接着,确认苹果15的卡槽位置。它位于手机右侧边框的底部区域,仔细查看会发现一个细小的圆形小孔,这正是用来弹出卡槽的插针孔。 将取卡…

    2026年9月22日
    300

发表回复

登录后才能评论
关注微信