CodeGym/课程/Frontend SELF ZH/Date. 日期和数字格式化

Date. 日期和数字格式化

可用

2.1 Date 对象

处理日期和数字是开发 web 应用程序的重要组成部分。JavaScript 提供了内置对象和方法来操作日期和数字。在这节课中,我们将讨论 Date 对象,它的方法以及日期和数字的格式化方式。

JavaScript 中的 Date 对象表示日期和时间。它有许多用于处理日期的方法,包括获取当前日期和时间、设置日期和时间以及格式化。

创建 Date 对象

重要!
如果你创建一个没有参数的 Date() 对象,它将包含 当前的日期和时间 — 创建时的那一刻。

Date 对象可以通过多种方式创建。

1. 当前日期和时间:

JavaScript
const now = new Date();

console.log(now); // 输出当前日期和时间

2. 设置特定日期和时间:

JavaScript
const specificDate = new Date('2024-07-07T10:00:00');

console.log(specificDate); // 输出日期 2024 年 7 月 7 日

3. 使用数值设置日期和时间:

JavaScript
const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

console.log(anotherDate); // 输出日期 2024 年 7 月 7 日

2.2 Date() 对象的方法

获取日期组件:

  • getFullYear(): 获取年份(四位数)
  • getMonth(): 获取月份(从 0 到 11)
  • getDate(): 获取月份中的日期(从 1 到 31)
  • getHours(): 获取小时(从 0 到 23)
  • getMinutes(): 获取分钟(从 0 到 59)
  • getSeconds(): 获取秒(从 0 到 59)

例子:

JavaScript
const now = new Date();

console.log(now.getFullYear()); // 当前年份
console.log(now.getMonth()); // 当前月份 (-1)
console.log(now.getDate()); // 当前日期
console.log(now.getHours()); // 当前小时
console.log(now.getMinutes()); // 当前分钟
console.log(now.getSeconds()); // 当前秒

设置日期组件:

  • setFullYear(year): 设置年份
  • setMonth(month): 设置月份
  • setDate(day): 设置日期
  • setHours(hours): 设置小时
  • setMinutes(minutes): 设置分钟
  • setSeconds(seconds): 设置秒

例子:

JavaScript
const date = new Date();

date.setFullYear(2025);
date.setMonth(0); // 一月
date.setDate(15);
date.setHours(12);
date.setMinutes(30);
date.setSeconds(45);

console.log(date.toString());

2.3 日期格式化

JavaScript 提供了将日期格式化为字符串的方法。最流行的方法是 toLocaleDateString(),用于根据本地环境格式化日期。

使用 toLocaleDateString() 的示例:

JavaScript
const now = new Date();

console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)

toLocaleTimeString() 方法

方法 toLocaleTimeString() 以本地化格式返回时间字符串:

JavaScript
const now = new Date();

console.log(now.toLocaleTimeString('en-CA'));
console.log(now.toLocaleTimeString('en-GB'));

toLocaleString() 方法

方法 toLocaleString() 以本地化格式返回日期和时间字符串:

JavaScript
const now = new Date();

console.log(now.toLocaleString('en-CA'));
console.log(now.toLocaleString('en-GB'));

toISOString() 方法

方法 toISOString() 以 ISO 8601 格式返回日期和时间:

JavaScript
const now = new Date();

console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 数字格式化

toLocaleString() 方法

方法 toLocaleString() 允许根据本地设置格式化数字:

JavaScript
const number = 1234567.89;

console.log(number.toLocaleString()); // "1,234,567.89" 在美国格式或 "1 234 567,89" 在本地格式
console.log(number.toLocaleString('de-DE')); // "1.234.567,89" 在德国家里格式

使用 Intl.NumberFormat 格式化数字

构造函数 Intl.NumberFormat 提供了更灵活的数字格式化选项:

JavaScript
const number = 1234567.89;

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(number)); // "1,234,567.89"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(number)); // "1.234.567,89"

const customFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(customFormatter.format(number)); // "$1,234,567.89"
1
任务
Frontend SELF ZH,  第 37 级课程 1
已锁定
当前日期和时间
当前日期和时间
1
任务
Frontend SELF ZH,  第 37 级课程 1
已锁定
日期组件
日期组件
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论