随着互联网的不断发展和全球化的趋势，多语言和多地区的需求变得越来越普遍。在前端开发中，我们经常需要对数字和日期进行格式化，以便在不同的语言环境下呈现出正确的格式。ES12 中引入了 Intl.NumberFormat 和 Intl.DateTimeFormat 方法，可以帮助我们更方便地处理这些问题。
Intl.NumberFormat 方法
Intl.NumberFormat 方法用于将数字格式化为特定语言环境的字符串。它接受一个或多个参数，其中第一个参数是语言环境代码或语言环境数组，其余参数是一个选项对象，用于指定格式化的方式。
语言环境代码
语言环境代码是一个字符串，用于指定要使用的语言环境。它由两部分组成，用横线分隔。第一部分是语言代码，第二部分是地区代码。例如，en-US 表示英语（美国地区）。
如果省略了语言代码或地区代码，Intl.NumberFormat 方法会使用默认值。例如，如果只指定了 en，那么它将使用 en-US 作为默认值。
选项对象
选项对象用于指定要使用的格式化方式。它可以包含以下属性：
- style：指定要使用的格式化样式，可以是 "decimal"、"currency" 或 "percent"，默认值为 "decimal"。
- currency：如果 style 为 "currency"，则指定要使用的货币代码。
- minimumIntegerDigits：指定整数部分的最小位数，默认值为 1。
- minimumFractionDigits：指定小数部分的最小位数，默认值为 0。
- maximumFractionDigits：指定小数部分的最大位数，默认值为 3。
- minimumSignificantDigits：指定有效数字的最小位数。
- maximumSignificantDigits：指定有效数字的最大位数。
下面是一个简单的示例，演示如何使用 Intl.NumberFormat 方法将数字格式化为货币：
const price = 1234.5678;
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
console.log(formatter.format(price)); // $1,234.57在这个示例中，我们使用 en-US 作为语言环境，使用 "currency" 格式化样式，指定货币代码为 USD。最终输出的结果为 $1,234.57。
Intl.DateTimeFormat 方法
Intl.DateTimeFormat 方法用于将日期格式化为特定语言环境的字符串。它接受一个或多个参数，其中第一个参数是语言环境代码或语言环境数组，其余参数是一个选项对象，用于指定格式化的方式。
语言环境代码
语言环境代码的用法与 Intl.NumberFormat 方法相同。
选项对象
选项对象用于指定要使用的格式化方式。它可以包含以下属性：
- dateStyle：指定要使用的日期格式化样式，可以是 "full"、"long"、"medium" 或 "short"，默认值为 "undefined"。
- timeStyle：指定要使用的时间格式化样式，可以是 "full"、"long"、"medium" 或 "short"，默认值为 "undefined"。
- weekday：指定是否包含星期几，可以是 "narrow"、"short" 或 "long"，默认值为 "undefined"。
- era：指定是否包含纪元（例如公元前/公元后），可以是 "narrow"、"short" 或 "long"，默认值为 "undefined"。
- year：指定年份的格式，可以是 "numeric"、"2-digit" 或 "undefined"，默认值为 "undefined"。
- month：指定月份的格式，可以是 "numeric"、"2-digit"、"narrow"、"short" 或 "long"，默认值为 "undefined"。
- day：指定日期的格式，可以是 "numeric"、"2-digit" 或 "undefined"，默认值为 "undefined"。
- hour：指定小时的格式，可以是 "numeric"、"2-digit" 或 "undefined"，默认值为 "undefined"。
- minute：指定分钟的格式，可以是 "numeric"、"2-digit" 或 "undefined"，默认值为 "undefined"。
- second：指定秒数的格式，可以是 "numeric"、"2-digit" 或 "undefined"，默认值为 "undefined"。
下面是一个简单的示例，演示如何使用 Intl.DateTimeFormat 方法将日期格式化为特定语言环境的字符串：
const date = new Date();
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "full",
timeStyle: "medium",
});
console.log(formatter.format(date)); // Monday, November 1, 2021 at 10:33:44 AM在这个示例中，我们使用 en-US 作为语言环境，使用 "full" 日期格式化样式和 "medium" 时间格式化样式。最终输出的结果为 Monday, November 1, 2021 at 10:33:44 AM。
总结
在本文中，我们介绍了 ES12 中的 Intl.NumberFormat 和 Intl.DateTimeFormat 方法。它们可以帮助我们更方便地将数字和日期格式化为特定语言环境的字符串。我们还演示了如何使用这些方法，并讨论了它们的选项对象。希望这篇文章对你有所帮助，让你更好地处理多语言和多地区的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d92e7d3423812e4b9fca0