JS怎么利用Intl解决前端日期和时间的格式化

发布时间:2023-03-09 10:11:29 作者:iii
来源:亿速云 阅读:122

这篇“JS怎么利用Intl解决前端日期和时间的格式化”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JS怎么利用Intl解决前端日期和时间的格式化”文章吧。

简介

Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式。

在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral、dayjs、date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的 Intl API 即可满足格式化的需求。

构造

CollatorDateTimeFormatListFormatNumberFormatPluralRulesRelativeTimeFormat 是命名空间 Intl 中的构造函数。它们接受两个参数 - localesoptions。 locales 必须是符合 BCP 47 语言标记 的字符串或字符串数组。

locales 参数

其中 locales 中常用的有:

含义
zh-Hant用繁体字书写的中文
zh-Hans用简体字书写的中文
zh-cmn-Hans-CN中文,普通话,简体,用于中国
zh-Hans-CN简体中文,用于中国大陆
zh-yue-HK中文,广东话,香港特别行政区使用
cmn-Hans-CN简体中文,用于中国
yue-HK粤语,香港特别行政区使用
en-US美式英语 (US English)
en-GB英式英语 (British English)
ko-KR韩语
ja-JP日语

options 参数

options 参数必须是一个对象,其属性值在不同的构造函数和方法中会有所变化。如果 options 参数未提供或者为 undefined,所有的属性值则使用默认的。

Intl.NumberFormat

Intl.NumberFormat 对象能使数字在特定的语言环境下格式化。

const number = 123456.789

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number))
// Expected output: "123.456,79 €"

// The Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number))
// Expected output: "¥123,457"

console.log(new Intl.NumberFormat('zh-CN', {}).format(number))
// "123,456.789"

常用 options 参数

style:要使用的格式样式,默认为 decimal

currency:用于货币格式的货币(没有默认值,如果 style 的值是 currency 则必须提供)。可能的值是 ISO 4217 货币代码,例如 CNY 代表人民币, USD 代表美元,EUR 代表欧元,JPY 代表日元。

currencyDisplay:如何以货币格式显示货币。可能的值是:

currencySign:在许多区域设置中,记帐格式将数字括在括号中而不是添加减号。currencySign 通过将选项设置为 accounting 启用此格式。默认为 standard

unitunit 的格式中使用的单位,可能的值是核心单位标识符,如UTS #35,第 2 部分,第 6 节中所定义。从整个列表中选择了一部分单元用于 ECMAScript。一对简单单位 -per- 可以用组合成一个复合单位。没有默认值。如果是 styleunit,则必须指定该属性。

unitDisplayunit 用于格式化的单位格式化样式,默认为 short

notation:一种显示数值的格式。默认为 standard

compactDisplay:仅在 notationcompact 时使用。可以是 short(默认)或 long

maximumFractionDigits:最大分数位数(最多保留几位小数)

minimumFractionDigits:最小分数位数(最少保留几位小数)

maximumSignificantDigits:最多几位有效数字

例子

货币

const numbers = [245, 2345234.2345, 3456]

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})

numbers.forEach((number) => {
  console.log(formatter.format(number))
})
// ¥245.00
// ¥2,345,234.23
// ¥3,456.00

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(245) // 245.00人民币

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(2345234.2345) // 2,345,234.23 人民幣

百分比

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(34) // 3,400%

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(0.34) // 34%

单位格式

new Intl.NumberFormat('cmn-Hans-CN', { style: 'unit', unit: 'kilometer-per-hour' }).format(4522) // 4,522 km/h

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'long',
}).format(4522) // 每小时4,522公里

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'narrow',
}).format(4522) // 4,522km/h

科学缩写

console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'scientific' }).format(452136)) // 4.521E5
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'engineering' }).format(452136)) // 452.136E3
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'compact' }).format(452136)) // 45万

Intl.DateTimeFormat

Intl.DateTimeFormat 对象能使日期和时间在特定的语言环境下格式化。

常用 options 参数

dateStyle:调用 format() 时使用的日期格式样式。可能的值包括:

timeStyle:调用 format() 时使用的时间格式样式。可能的值包括:

dayPeriod: 用于“早上”、“上午”、“中午”、“n”等日期时间段的格式样式。可能的值包括: narrow, short, long

timeZone: 时区,比如上海“Asia/Shanghai”,纽约是"America/New_York"

hourCycle: 要使用的小时周期(12小时制,24小时制) 值可以为:h21h22h33h34

weekday: 工作日的表示形式。可能的值为:

year: 年份的表示。可能的值为:

month: 月份的表示。可能的值为:

day: 一天的表示。可能的值为:

hour: 小时的表示。可能的值为:

minute: 分钟的表示。可能的值为:

second: 秒的表示。可能的值为:

fractionalSecondDigits: 用于表示秒小数部分的位数(其他的数字将被截断)。可能的值为:

例子

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(new Intl.DateTimeFormat('zh-CN').format(date)); // "2012/12/20"
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'long', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 GMT+8 11:00:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'short', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 11:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  year: 'numeric', 
  month: '2-digit', 
  day: '2-digit' 
}).format(date)); // “2012/12/20”

以上就是关于“JS怎么利用Intl解决前端日期和时间的格式化”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. JavaScript实现焦点进入文本框内关闭输入法的核心代码
  2. JS简单实现父子窗口传值功能示例【未使用iframe框架】

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js intl

上一篇:Android Service启动绑定流程是什么

下一篇:Angular.js如何实现扫码枪扫码并生成二维码

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》