[{"data":1,"prerenderedAt":117},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fintl-numberformat":3,"surround:\u002Fposts\u002F2025\u002Fintl-numberformat":106},{"id":4,"title":5,"body":6,"canonical":86,"categories":87,"date":89,"description":90,"draft":91,"extension":92,"image":86,"meta":93,"navigation":94,"path":95,"permalink":86,"readingTime":96,"recommend":86,"references":86,"seo":101,"sitemap":102,"stem":103,"tags":104,"type":86,"updated":89,"__hash__":105},"content\u002Fposts\u002F2025\u002FIntl-NumberFormat.md","使用Intl.NumberFormat对数字进行格式化",{"type":7,"value":8,"toc":78},"minimark",[9,13,24,28,31,42,45,48,54,57,60,66,69,72],[10,11,12],"p",{},"Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。",[10,14,15,16,23],{},"这里我用几个有用的函数来展示",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FIntl\u002FNumberFormat",[21],"nofollow","Intl.NumberFormat","（数字格式化）的用法",[25,26,27],"h2",{"id":27},"根据浏览器环境语言自动切换",[10,29,30],{},"在浏览器环境中，我们可以读取现在使用的语言。自动使用对应的语言进行格式化",[32,33,39],"pre",{"className":34,"code":36,"language":37,"meta":38},[35],"language-js","export const numberFormatter = new Intl.NumberFormat(navigator.language, {\n    notation: \"compact\",\n});\n","js","",[40,41,36],"code",{"__ignoreMap":38},[25,43,44],{"id":44},"金钱格式化",[10,46,47],{},"对金钱的格式化，可以要求使用什么货币格式进行格式化",[32,49,52],{"className":50,"code":51,"language":37,"meta":38},[35],"const number = 123456.789;\n\nconsole.log(\n    new Intl.NumberFormat(\"de-DE\", { style: \"currency\", currency: \"EUR\" }).format(\n        number,\n    ),\n);\n\u002F\u002F 输出 \"123.456,79 €\"\n\n\u002F\u002F 日本金融格式化\nconsole.log(\n    new Intl.NumberFormat(\"ja-JP\", { style: \"currency\", currency: \"JPY\" }).format(\n        number,\n    ),\n);\n\u002F\u002F 输出 \"￥123,457\"\n\n\u002F\u002F 中文元格式化\nconsole.log(\n    new Intl.NumberFormat(\"zh-CN\", { style: \"currency\", currency: \"CNY\" }).format(\n        number,\n    ),\n);\n\n\u002F\u002F 输出 ¥123,456.79\n\n\u002F\u002F 按千分位分隔\nconsole.log(\n    new Intl.NumberFormat(\"en-IN\", { maximumSignificantDigits: 3 }).format(\n        number,\n    ),\n);\n\u002F\u002F 输出 \"1,23,000\"\n",[40,53,51],{"__ignoreMap":38},[25,55,56],{"id":56},"不同语种",[10,58,59],{},"让Intl对各种语言进行数字的格式化，在多语言环境中无需额外考虑不同语种格式化的问题",[32,61,64],{"className":62,"code":63,"language":37,"meta":38},[35],"const number = 123456.789;\n\n\u002F\u002F 德语使用逗号（,）作为小数点，使用句号（.）作为千位分隔符\nconsole.log(new Intl.NumberFormat(\"de-DE\").format(number));\n\u002F\u002F → 123.456,789\n\n\u002F\u002F 大多数阿拉伯语国家使用阿拉伯语数字\nconsole.log(new Intl.NumberFormat(\"ar-EG\").format(number));\n\u002F\u002F → ١٢٣٤٥٦٫٧٨٩\n\n\u002F\u002F India uses thousands\u002Flakh\u002Fcrore separators\nconsole.log(new Intl.NumberFormat(\"en-IN\").format(number));\n\u002F\u002F → 1,23,456.789\n\n\u002F\u002F 通过编号系统中的 nu 扩展键请求，例如：中文十进制数字\nconsole.log(new Intl.NumberFormat(\"zh-Hans-CN-u-nu-hanidec\").format(number));\n\u002F\u002F → 一二三,四五六.七八九\n\n\u002F\u002F 当请求的语言不被支持，例如巴里，包含一个回滚语言印尼，这时候就会使用印尼语\nconsole.log(new Intl.NumberFormat([\"ban\", \"id\"]).format(number));\n\u002F\u002F → 123.456,789\n",[40,65,63],{"__ignoreMap":38},[25,67,68],{"id":68},"携带单位",[10,70,71],{},"可以带单位进行格式化",[32,73,76],{"className":74,"code":75,"language":37,"meta":38},[35],"console.log(\n    new Intl.NumberFormat(\"pt-PT\", {\n        style: \"unit\",\n        unit: \"kilometer-per-hour\",\n    }).format(50),\n);\n\u002F\u002F 50 km\u002Fh\n",[40,77,75],{"__ignoreMap":38},{"title":38,"searchDepth":79,"depth":79,"links":80},4,[81,83,84,85],{"id":27,"depth":82,"text":27},2,{"id":44,"depth":82,"text":44},{"id":56,"depth":82,"text":56},{"id":68,"depth":82,"text":68},null,[88],"代码","2025-04-30 16:15:29","Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Can I Use 中查询到它已经有 94.47% 适配，所以我们可以在项目中使用它。",false,"md",{},true,"\u002Fposts\u002F2025\u002Fintl-numberformat",{"text":97,"minutes":98,"time":99,"words":100},"3 min read",2.335,140100,467,{"title":5,"description":90},{"loc":95},"posts\u002F2025\u002FIntl-NumberFormat",[],"ceIGKfaTy7QY5QbtnUrIhW81vY0zW8RAAAdI1qCo9o4",[107,112],{"title":108,"path":109,"stem":110,"date":111,"type":86,"children":-1},"使用 chatgpt 制作自己的小贴纸","\u002Fposts\u002F2025\u002Fcreate-own-sticker-use-chatgpt","posts\u002F2025\u002Fcreate-own-sticker-use-chatgpt","2025-04-27 10:56:14",{"title":113,"path":114,"stem":115,"date":116,"type":86,"children":-1},"【翻译】如何构建大型 Vue 应用程序","\u002Fposts\u002F2025\u002Fhow-to-structure-a-large-scale-vue-application","posts\u002F2025\u002Fhow-to-structure-a-large-scale-vue-application","2025-05-06 09:40:22",1789642589573]