国外课栈 - 跨学科知识视角栈

使用DateTimeFormat对象格式化日期

 二维码 1464
文章附图


看看如何使用Intl.DateTimeFormat构造函数格式化日期

世界的不同部分具有不同的日期格式。为了解决这个问题,JavaScript具有Intl.DateTimeFormat构造函数,可让我们根据不同的语言环境将日期格式化为不同的格式。

这意味着我们可以设置不同地方的日期格式,而无需自己操纵日期字符串,从而使我们的生活更加轻松。 Intl.DateTimeFormat构造函数采用语言环境字符串作为参数。

通过使用构造函数构造的DateTimeFormat,我们可以使用format实例方法,该方法将使用Date对象返回一个日期字符串,该字符串的日期格式应为在Intl.DateTimeFormat构造函数中指定的语言环境。

构造函数和格式化方法

要使用Intl.DateTimeFormat构造函数,可以像下面的示例一样使用它:

const date = new Date(2019, 0, 1, 0, 0, 0);
console.log(new Intl.DateTimeFormat('en-US').format(date));
console.log(new Intl.DateTimeFormat('fr-ca').format(date));
console.log(new Intl.DateTimeFormat(['ban', 'de']).format(date));

在上面的示例中,我们创建了Date对象,然后将Intl.DateTimeFormat构造函数与作为字符串传入的一个或多个语言环境一起使用。

然后,我们通过传入Date对象来调用format。第一个示例将记录2019年1月1日,因为美国使用MM / DD / YYYY日期格式。

第二个示例将日志记录为2019-01-01,因为加拿大法文的日期为YYYY-MM-DD格式。第三个示例采用一个数组,其中有多个语言环境,最右边的语言是左侧语言的后备语言环境。

在我们的示例中,由于数组的第一个条目中存在无效的语言环境字符串ban,因此我们使用德语日期格式de来格式化Date对象,因此由于德国使用了DD.MM.YYYY,因此我们得到1.1.2019日期格式。

从上面的示例可以看到,Intl.DateTimeFormat构造函数采用语言环境字符串或语言环境字符串数组。它还接受语言环境字符串的Unicode扩展键,因此我们可以将它们附加到我们的语言标签中。

支持扩展键nu用于设置编号系统,ca用于日历设置日期格式和用于小时周期的hc。

nu的可能值可以是arab, arabext, bali, beng, deva, fullwide, gujr, guru, hanidec, khmr, knda, laoo, latn, limb, mlym, mong, mymr, orya, tamldec, telu, thai, tibt。

ca的可能值包括buddhist, chinese, coptic, ethiopia, ethiopic, gregory, hebrew, indian, islamic, iso8601, japanese, persian, roc。

hc的可能值包括h11, h12, h23, h24。例如,要根据佛教日历格式化日期,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0);
console.log(new Intl.DateTimeFormat('en-US-u-ca-buddhist').format(date));

然后,由于佛教历法的第0年是在545 BC,我们在console.log中获得了1/1/2562。

第二个参数采用一个对象,该对象使我们可以在其属性中设置各种选项以格式化日期。

localeMatcher选项指定要使用的语言环境匹配算法。查找和最佳拟合的可能值。 查找算法搜索语言环境,直到找到适合所比较字符串的字符集的语言环境为止。

最适合查找的语言环境至少比查找算法可能更合适。使用timeZone选项,我们可以设置用于格式化日期的时区。

最基本的实现只能识别UTC,但其他实现可以识别IANA时区数据数据库中的IANA时区名称,例如Asia/Shanghai, Asia/Kolkata, America/New_York。

hour12选项指定格式是12小时制还是24小时制。默认值取决于地区。它会覆盖第一个参数中的hc 语言标签。

true或false值,其中true表示将日期时间格式化为12小时制。 hourCycle选项的可能值是h11,h12,h23,h24,并覆盖hc语言标记。如果已指定,hour12优先于此选项。

formatMatcher属性指定要使用的匹配算法。可能的值是基本值和最佳拟合值。最合适的是默认值。

需要以下日期时间子集才能将日期对象与正确格式匹配:

  • weekday, year, month, day, hour, minute, second
  • weekday, year, month, day
  • year, month, day
  • year, month
  • month, day
  • hour, minute, second
  • hour, minute

weekday代表工作日值,可能的值为:

  • long(e.g., Friday)
  • short(e.g., Fri)
  • “narrow”(e.g., T)请注意,在某些地区,两个工作日的样式可能相同。例如,星期二的窄样式也是T。

era代表时代,可能的值为:

  • long(e.g., Anno Domini)
  • short(e.g., AD)
  • narrow(e.g., A)

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

  • numeric(e.g., 2019)
  • 2-digit(e.g.,19)

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

  • numeric (e.g., 2)
  • 2-digit (e.g., 02)
  • long (e.g., February)
  • short (e.g., Feb)
  • narrow (e.g., M)请注意,在某些地区,两个月可能具有相同的缩小样式(例如,May的缩小样式也为M)。

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

  • numeric (e.g., 2)
  • 2-digit (e.g., 02)

hour是小时的表示。可能的值为numeric,2-digit。

minute是分钟的表示。可能的值为numeric,2-digit。

second是秒钟的表示。可能的值为numeric,2-digit。

timeZoneName是时区名称的表示。可能的值为:

  • long (e.g., Pacific Standard Time)
  • short (e.g., GMT-8)

上面每个组件属性的默认值都是未定义的,但是如果所有组件都未定义,则假定年,月和日为数字。

下面是使用选项的示例:

const date = new Date(2019, 0, 1, 0, 0, 0);
const options = {
   
weekday: 'long',
   
year: 'numeric',
   
month: 'long',
   
day: 'numeric'
};
console.log(new Intl.DateTimeFormat('en-ca', options).format(date));

在上面的代码中,我们将语言环境设置为加拿大英语,在选项对象中,将工作日设置为long,将year设置为数字,将month设置为long,将day设置为数字,以便获得英文的完整工作日名称,年份为 数字,全名的月份和数字的日子。

console.log将记录“ 2019年1月1日,星期二”。上面的示例可以添加一个时区,如以下示例所示:

const date = new Date(2019, 0, 1, 0, 0, 0);
const options = {
   
weekday: 'long',
   
year: 'numeric',
   
month: 'long',
   
day: 'numeric',
   
timeZone: 'America/Vancouver',
   
timeZoneName: 'long'
};
console.log(new Intl.DateTimeFormat('en-ca', options).format(date));

在上面的示例中,我们添加了timeZone和timeZoneLong,以便显示时区,从而获得“太平洋标准时间2019年1月1日,星期二”。

Intl.DateTimeFormat构造函数同样可以很好地处理非英语格式。例如,如果要将日期格式设置为中文,则可以更改语言环境,并使选项与上述相同,如以下代码所示:

const date = new Date(2019, 0, 1, 0, 0, 0);
const options = {
   
weekday: 'long',
   
year: 'numeric',
   
month: 'long',
   
day: 'numeric',
   
timeZone: 'America/Vancouver',
   
timeZoneName: 'long'
};
console.log(new Intl.DateTimeFormat('zh-Hant', options).format(date));

然后,我们得到“ 2019年1月1日星期二太平洋标准时间”,与繁体中文的“ 2019年1月1日,星期二”相同。

其他实例方法

除了format()方法之外,Intl.DateTimeFormat构造函数对象的实例还具有一些实例方法。

它还具有formatToParts()方法,用于返回表示日期字符串不同部分的对象数组。 resolveOptions()方法返回一个新对象,该对象的属性反映了我们在对象初始化期间计算出的语言环境和格式设置选项。

formatRange()方法接受两个Date对象作为参数,并根据我们实例化DateTimeFormat对象时提供的语言环境和选项,以最简洁的方式格式化日期范围。

最后,它具有formatRangeToParts()方法,该方法接受两个Date对象作为参数,并根据实例化DateTimeFormat对象以及对象数组中返回日期时间部分时提供的语言环境和选项,以最简洁的方式格式化日期范围 。

例如,如果我们有以下调用formatRangeToParts()方法的代码:

const startDate = new Date(2019, 0, 1, 0, 0, 0);
const endDate = new Date(2019, 0, 2, 0, 0, 0);
const options = {
   weekday:
'long',
   year:
'numeric',
   month:
'long',
   day:
'numeric',
   timeZone:
'America/Vancouver',
   timeZoneName:
'long'
};
const dateRange = new Intl.DateTimeFormat('zh-Hant', options).formatRangeToParts(startDate, endDate)
console.log(dateRange);

然后,我们记录以下日期和时间部分:

[
   {
    "type":
"year",
    "value":
"2019",
    "source":
"startRange"
   },
   {
    "type":
"literal",
    "value":
"年",
    "source":
"startRange"
   },
   {
    "type":
"month",
    "value":
"1",
    "source":
"startRange"
   },
   {
    "type":
"literal",
    "value":
"月",
    "source":
"startRange"
   },
   {
    "type":
"day",
    "value":
"1",
    "source":
"startRange"
   },
   {
    "type":
"literal",
    "value":
"日 ",
    "source":
"startRange"
   },
   {
    "type":
"weekday",
    "value":
"星期二",
    "source":
"startRange"
   },
   {
    "type":
"literal",
    "value":
" ",
    "source":
"startRange"
   },
   {
    "type":
"timeZoneName",
    "value":
"太平洋標準時間",
    "source":
"startRange"
   },
   {
    "type":
"literal",
    "value":
" - ",
    "source":
"shared"
   },
   {
    "type":
"year",
    "value":
"2019",
    "source":
"endRange"
   },
   {
    "type":
"literal",
    "value":
"年",
    "source":
"endRange"
   },
   {
    "type":
"month",
    "value":
"1",
    "source":
"endRange"
   },
   {
    "type":
"literal",
    "value":
"月",
    "source":
"endRange"
   },
   {
    "type":
"day",
    "value":
"2",
    "source":
"endRange"
   },
   {
    "type":
"literal",
    "value":
"日 ",
    "source":
"endRange"
   },
   {
    "type":
"weekday",
    "value":
"星期三",
    "source":
"endRange"
   },
   {
    "type":
"literal",
    "value":
" ",
    "source":
"endRange"
   },
   {
    "type":
"timeZoneName",
    "value":
"太平洋標準時間",
    "source":
"endRange"
   }
]

从上面的控制台输出中可以看到,我们在数组的每个条目中获取日期和时间部分,其中startDate部分在数组的前面,而endDate部分在数组的后面。

如果我们调用formatRange()方法,如下面的代码所示:

const startDate = new Date(2019, 0, 1, 0, 0, 0);
const endDate = new Date(2019, 0, 2, 0, 0, 0);
const options = {
   weekday:
'long',
   year:
'numeric',
   month:
'long',
   day:
'numeric',
   timeZone:
'America/Vancouver',
   timeZoneName:
'long'
};
const dateRange = new Intl.DateTimeFormat('en', options).formatRange(startDate, endDate)
console.log(dateRange);

然后我们从console.log得到:

"Tuesday, January 1, 2019, Pacific Standard Time - Wednesday, January 2, 2019, Pacific Standard Time"

要调用resolveOptions方法,我们可以编写以下代码:

const date = new Date(2019, 0, 1, 0, 0, 0);
const options = {
   
weekday: 'long',
   
year: 'numeric',
   
month: 'long',
   
day: 'numeric',
   
timeZone: 'America/Vancouver',
   
timeZoneName: 'long'
};
const resolvedOptions = new Intl.DateTimeFormat('en', options).resolvedOptions(date)
console.log(resolvedOptions);

然后,我们在console.log中获得传入的格式化日期的选项:

{
   "locale":
"en",
   "calendar":
"gregory",
   "numberingSystem":
"latn",
   "timeZone":
"America/Vancouver",
   "weekday":
"long",
   "year":
"numeric",
   "month":
"long",
   "day":
"numeric",
   "timeZoneName":
"long"
}

要使用formatToParts()方法,可以像format()方法一样使用它,如以下代码所示:

const date = new Date(2019, 0, 1, 0, 0, 0);
const options = {
   
weekday: 'long',
   
year: 'numeric',
   
month: 'long',
   
day: 'numeric',
   
timeZone: 'America/Vancouver',
   
timeZoneName: 'long'
};
const dateParts = new Intl.DateTimeFormat('en', options).formatToParts(date)
console.log(dateParts);

然后,我们在console.log中获得格式化日期的部分,如下面的输出所示:

[
   {
    "type":
"weekday",
    "value":
"Tuesday"
   },
   {
    "type":
"literal",
    "value":
", "
   },
   {
    "type":
"month",
    "value":
"January"
   },
   {
    "type":
"literal",
    "value":
" "
   },
   {
    "type":
"day",
    "value":
"1"
   },
   {
    "type":
"literal",
    "value":
", "
   },
   {
    "type":
"year",
    "value":
"2019"
   },
   {
    "type":
"literal",
    "value":
", "
   },
   {
    "type":
"timeZoneName",
    "value":
"Pacific Standard Time"
   }
]

如我们所见,Intl.DateTimeFormat构造函数对于格式化不同语言环境的日期非常有用。消除了格式化日期时的麻烦。

构造函数将一个或多个语言环境作为第一个参数,并将各种选项作为第二个参数。

它可以将日期格式化为一个字符串,还可以将日期格式化并将其分解为多个部分。在格式化不同地区的日期时,这省去了很多麻烦,因为我们无需执行任何日期字符串操作。


文章分类: 编程技艺Javascript