JavaScript内核与高级编程之：`JavaScript`的`Intl.NumberFormat`：其在 `JavaScript` 国际化数字格式化中的高级用法。

嘿，各位代码界的弄潮儿！今天咱们来聊聊JavaScript里一位低调但实力强劲的选手：Intl.NumberFormat。这货可不是个简单的数字格式化工具，它能让你轻松驾驭各种国际化的数字显示需求，让你的应用瞬间高大上，走向世界！

开场白：为啥我们需要Intl.NumberFormat？

想象一下，你在做一个电商网站，用户来自世界各地。价格显示是个大问题：

• 美国用户习惯用逗号分隔千位，小数点表示小数，比如 $1,234.56
• 德国用户喜欢用点分隔千位，逗号表示小数，比如 1.234,56 €
• 印度用户可能需要用“拉克”（lakh）和“克若尔”（crore）来表示大额数字，比如 ₹1,23,45,678.90

如果你手动写代码来处理这些差异，那简直是噩梦！代码会变得臃肿不堪，而且容易出错。

Intl.NumberFormat 就是来拯救你的！它基于 Unicode CLDR (Common Locale Data Repository)，提供了强大的国际化数字格式化能力，帮你轻松应对各种语言和地区的数字显示习惯。

第一部分：Intl.NumberFormat 的基本用法

Intl.NumberFormat 的基本用法很简单：

const number = 123456.789;

// 使用默认 locale (通常是用户的浏览器 locale)
const formatter = new Intl.NumberFormat();
console.log(formatter.format(number)); // 输出取决于用户的 locale，例如 "123,456.789" (en-US) 或 "123.456,789" (de-DE)

// 使用指定的 locale
const formatterDE = new Intl.NumberFormat('de-DE');
console.log(formatterDE.format(number)); // 输出 "123.456,789"

const formatterIN = new Intl.NumberFormat('en-IN');
console.log(formatterIN.format(number)); // 输出 "1,23,456.789"

const formatterJA = new Intl.NumberFormat('ja-JP');
console.log(formatterJA.format(number)); // 输出 "123,456.789"

这段代码展示了如何创建一个 Intl.NumberFormat 实例，以及如何使用 format() 方法将数字格式化为字符串。你可以指定一个 locale 字符串（比如 'de-DE'、'en-IN'、'ja-JP'）来控制格式化的风格。如果省略 locale 字符串，则使用用户的浏览器 locale。

第二部分：Intl.NumberFormat 的选项：自定义你的格式

Intl.NumberFormat 的真正强大之处在于它的选项。你可以通过一个可选的选项对象来定制格式化的行为。

const number = 1234.567;

const options = {
  style: 'currency', // 使用货币格式
  currency: 'USD', // 使用美元
  currencyDisplay: 'symbol', // 显示货币符号
  minimumFractionDigits: 2, // 最小小数位数
  maximumFractionDigits: 2, // 最大小数位数
};

const formatter = new Intl.NumberFormat('en-US', options);
console.log(formatter.format(number)); // 输出 "$1,234.57"

这个例子展示了如何使用 style、currency、currencyDisplay、minimumFractionDigits 和 maximumFractionDigits 选项来格式化货币。

下面是一些常用的选项及其含义：

选项名	含义	示例
localeMatcher	指定 locale 匹配算法。可以是 'best fit' 或 'lookup'。	localeMatcher: 'lookup'
numberingSystem	指定使用的数字系统。例如 'arab'、'latn'、'thai'。	numberingSystem: 'arab'
style	指定格式化的风格。可以是 'decimal'、'currency'、'percent' 或 'unit'。	style: 'percent'
currency	指定货币代码（ISO 4217）。例如 'USD'、'EUR'、'JPY'。	currency: 'EUR'
currencyDisplay	指定货币符号的显示方式。可以是 'symbol'、'code' 或 'name'。	currencyDisplay: 'code'
currencySign	指定货币符号的位置。可以是 'standard' 或 'accounting'。	currencySign: 'accounting'
useGrouping	是否使用分组分隔符（例如逗号或点）。	useGrouping: false
minimumIntegerDigits	整数部分的最小位数。	minimumIntegerDigits: 3
minimumFractionDigits	小数部分的最小位数。	minimumFractionDigits: 2
maximumFractionDigits	小数部分的最大位数。	maximumFractionDigits: 4
minimumSignificantDigits	有效数字的最小位数。	minimumSignificantDigits: 1
maximumSignificantDigits	有效数字的最大位数。	maximumSignificantDigits: 3
unit	指定单位。例如 'kilogram'、'mile-per-hour'。	style: 'unit', unit: 'kilogram'
unitDisplay	指定单位的显示方式。可以是 'long'、'short' 或 'narrow'。	style: 'unit', unit: 'kilogram', unitDisplay: 'short'

第三部分：高级用法：深入挖掘 Intl.NumberFormat 的潜力

1. 格式化百分比：

   const number = 0.75;
   
   const options = {
     style: 'percent',
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   };
   
   const formatter = new Intl.NumberFormat('en-US', options);
   console.log(formatter.format(number)); // 输出 "75.00%"

2. 格式化单位：

   const number = 100;
   
   const options = {
     style: 'unit',
     unit: 'mile-per-hour',
     unitDisplay: 'short',
   };
   
   const formatter = new Intl.NumberFormat('en-US', options);
   console.log(formatter.format(number)); // 输出 "100 mph"

3. 处理不同的数字系统：

   const number = 123456789;
   
   const options = {
     numberingSystem: 'arab',
   };
   
   const formatter = new Intl.NumberFormat('ar-EG', options);
   console.log(formatter.format(number)); // 输出 "١٢٣٬٤٥٦٬٧٨٩" (阿拉伯数字)

4. 使用 resolvedOptions() 获取格式化器的配置：

   resolvedOptions() 方法可以返回一个包含格式化器配置信息的对象。这对于调试和理解格式化器的行为非常有用。

   const options = {
     style: 'currency',
     currency: 'USD',
   };
   
   const formatter = new Intl.NumberFormat('en-US', options);
   const resolvedOptions = formatter.resolvedOptions();
   console.log(resolvedOptions);
   /*
   输出：
   {
     locale: "en-US",
     numberingSystem: "latn",
     style: "currency",
     currency: "USD",
     currencyDisplay: "symbol",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
     useGrouping: true
   }
   */

5. formatToParts() 方法：更精细的控制

   formatToParts() 方法可以将数字格式化为包含各个部分的数组。这让你能够对格式化的结果进行更精细的控制。

   const number = 1234.56;
   
   const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
   const parts = formatter.formatToParts(number);
   console.log(parts);
   /*
   输出：
   [
     {type: "currency", value: "$"},
     {type: "integer", value: "1"},
     {type: "group", value: ","},
     {type: "integer", value: "234"},
     {type: "decimal", value: "."},
     {type: "fraction", value: "56"}
   ]
   */
   
   // 你可以根据需要对这些部分进行处理
   const formattedNumber = parts.map(part => {
     if (part.type === 'currency') {
       return `<span class="currency">${part.value}</span>`;
     } else {
       return part.value;
     }
   }).join('');
   
   console.log(formattedNumber); // 输出 "<span class="currency">$</span>1,234.56"

   这个例子展示了如何使用 formatToParts() 方法将货币格式化为包含货币符号、整数部分、分组分隔符、小数部分等的数组，然后使用这些部分构建一个包含 HTML 标签的字符串。

第四部分：实战演练：构建一个国际化的价格显示组件

现在，让我们把学到的知识应用到实际项目中。我们将构建一个简单的 React 组件，用于显示国际化的价格。

import React from 'react';

const Price = ({ amount, currency, locale }) => {
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
  });

  return <span>{formatter.format(amount)}</span>;
};

export default Price;

这个组件接收三个 props：amount（价格金额）、currency（货币代码）和 locale（locale 字符串）。它使用 Intl.NumberFormat 来格式化价格，并将其显示在一个 span 元素中。

使用方法：

import Price from './Price';

const App = () => {
  return (
    <div>
      <p>美国价格: <Price amount={1234.56} currency="USD" locale="en-US" /></p>
      <p>德国价格: <Price amount={1234.56} currency="EUR" locale="de-DE" /></p>
      <p>日本价格: <Price amount={1234.56} currency="JPY" locale="ja-JP" /></p>
    </div>
  );
};

export default App;

这段代码会根据指定的 locale 和货币代码，显示不同的价格格式。

第五部分：注意事项和最佳实践

• 浏览器支持： Intl.NumberFormat 得到了现代浏览器的广泛支持。但是，为了兼容旧版本浏览器，你可能需要使用 polyfill。
• 性能： 创建 Intl.NumberFormat 实例可能比较耗时。为了提高性能，你应该尽可能地重用 Intl.NumberFormat 实例，而不是每次都创建新的实例。
• 错误处理： 如果指定的 locale 不受支持，Intl.NumberFormat 可能会抛出异常。你应该使用 try...catch 语句来处理这些异常。
• 避免手动格式化： 尽量避免手动编写代码来格式化数字。Intl.NumberFormat 提供了更可靠、更灵活的解决方案。
• 了解 CLDR 数据： Intl.NumberFormat 依赖于 Unicode CLDR 数据。了解 CLDR 数据可以帮助你更好地理解 Intl.NumberFormat 的行为。

结尾：总结与展望

Intl.NumberFormat 是一个强大的 JavaScript API，可以让你轻松地处理各种国际化的数字格式化需求。掌握 Intl.NumberFormat 的用法，可以让你编写出更健壮、更易于维护的国际化应用。

希望今天的讲座对你有所帮助。记住，代码的世界是无限的，不断学习、不断探索，才能成为真正的编程大师！ 各位，下次再见！