JS利用Intl解决前端日期和时间的格式化详解
简介
Intl
是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式。
在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral、dayjs、date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的 Intl
API 即可满足格式化的需求。
构造
Collator
,DateTimeFormat
,ListFormat
,NumberFormat
,PluralRules
,RelativeTimeFormat
是命名空间 Intl
中的构造函数。它们接受两个参数 - locales
和 options
。 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
。
decimal
用于普通数字格式。currency
用于货币格式。percent
用于百分比格式。unit
用于单位格式。
currency
:用于货币格式的货币(没有默认值,如果 style
的值是 currency
则必须提供)。可能的值是 ISO 4217 货币代码,例如 CNY
代表人民币, USD
代表美元,EUR
代表欧元,JPY
代表日元。
currencyDisplay
:如何以货币格式显示货币。可能的值是:
symbol
使用本地化的货币符号,例如 €。这是默认值。narrowSymbol
使用简称($100
而不是US$100
)。code
使用 ISO 货币代码。name
使用本地化的货币名称,例如dollar
。
currencySign
:在许多区域设置中,记帐格式将数字括在括号中而不是添加减号。currencySign
通过将选项设置为 accounting
启用此格式。默认为 standard
。
unit
:unit
的格式中使用的单位,可能的值是核心单位标识符,如UTS #35,第 2 部分,第 6 节中所定义。从整个列表中选择了一部分单元用于 ECMAScript。一对简单单位 -per-
可以用组合成一个复合单位。没有默认值。如果是 style
为 unit
,则必须指定该属性。
unitDisplay
:unit
用于格式化的单位格式化样式,默认为 short
。
long
(例如 16 litres)short
(例如 16 l)narrow
(例如 16l)
notation
:一种显示数值的格式。默认为 standard
。
standard
是正常的数字格式。scientific
:使用科学记数法表示,比如4.5E5
。engineering
: 返回 10 的幂能够被 3 整除的科学计数表示(如果一个数小于 1000,则表示为 123 -123E0
,如果一个数大于 1000 小于 1000000,则表示为 45100 -45.1E3
)。compact
是表示指数表示法的字符串,默认使用“短”格式。
compactDisplay
:仅在 notation
为 compact
时使用。可以是 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()
时使用的日期格式样式。可能的值包括:
full
long
medium
short
(默认值)
timeStyle
:调用 format()
时使用的时间格式样式。可能的值包括:
full
long
medium
short
(默认值)
dayPeriod
: 用于“早上”、“上午”、“中午”、“n”等日期时间段的格式样式。可能的值包括: narrow
, short
, long
timeZone
: 时区,比如上海“Asia/Shanghai”,纽约是"America/New_York"
hourCycle
: 要使用的小时周期(12小时制,24小时制) 值可以为:h11
、h12
、h23
、h24
weekday
: 工作日的表示形式。可能的值为:
long
(例如,Thursday)short
(例如,Thu)narrow
(例如,)。两个工作日可能 对于某些语言环境具有相同的窄样式(例如 的窄样式也是)。TTuesdayT
year
: 年份的表示。可能的值为:
numeric
(例如,2012)2-digit
(例如,12)
month
: 月份的表示。可能的值为:
numeric
(例如,2)2-digit
(例如,02)long
(例如,March)short
(例如,Mar)narrow
day
: 一天的表示。可能的值为:
numeric
(例如,1)2-digit
(例如,01)
hour
: 小时的表示。可能的值为:
numeric
(例如,1)2-digit
(例如,01)
minute
: 分钟的表示。可能的值为:
numeric
(例如,1)2-digit
(例如,01)
second
: 秒的表示。可能的值为:
numeric
(例如,1)2-digit
(例如,01)
fractionalSecondDigits
: 用于表示秒小数部分的位数(其他的数字将被截断)。可能的值为:
0
: 小数部分全部丢弃。1
: 小数部分表示为 1 位数字。为 例如.736 的格式为 .72
:小数部分表示为 2 位数字。为 例如 .736 的格式为 .733
:小数部分表示为 3 位数字。为 例如 .736 的格式为 .736
例子
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解决前端日期和时间的格式化详解的文章就介绍到这了,更多相关JS Intl解决日期时间格式化内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7207769757571514426
相关文章
- 这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
mysql中获取一天、一周、一月时间数据的各种sql语句写法
创建表:复制代码 代码如下:create table if not exists t( id int, addTime datetime default '0000-00-00 00:00:00′)添加两条初始数据:insert t values(1, '2012-07-12 21:00:00′);insert t values(2, '2012-07...2014-05-31- 这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文实例讲述了php计算两个日期相差天数的方法。...2015-03-15