js前端json怎么转换时间

JavaScript前端：JSON时间格式转换全攻略**

在Web前端开发中，我们经常需要与后端进行数据交互，而JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用，一个常见且令人头疼的问题就是处理JSON中的时间数据，后端返回的时间格式往往不是前端直接可用的Date对象或我们期望的格式，这就需要我们在前端进行转换和格式化,本文将详细介绍在前端JavaScript中如何处理JSON时间格式转换的各种场景和方法。

JSON中常见的 time 格式

我们需要了解JSON中时间数据通常以哪些形式出现：

时间戳（Timestamp）：
- 数字型时间戳：通常是Unix时间戳，表示自1970年1月1日00:00:00 UTC以来的毫秒数（有时是秒数，需要注意区分）。
  - 示例："timestamp": 1678886400000 (毫秒) 或 "timestamp": 1678886400 (秒)
- 字符串型时间戳：时间戳被包裹在引号中。
  - 示例："timestamp": "1678886400000"
ISO 8601格式字符串：
- 这是JSON标准推荐的时间表示方式，通常包含完整的日期和时间信息,并有时区标识。
- 示例："date": "2023-03-15T12:00:00Z" (Z表示UTC时间) 或 "date": "2023-03-15T20:00:00+08:00" (+08表示东八区)
自定义格式字符串：
- 后端可能为了方便使用了自定义的日期字符串格式。
- 示例："date": "2023/03/15 12:00:00" 或 "date": "15-Mar-2023"

核心转换方法

将JSON时间字符串/数字转换为JavaScript Date对象

Date对象是JavaScript处理日期和时间的基础，我们需要将JSON中的时间表示法转换为Date对象，才能进行后续的格式化、计算等操作。

a. 处理时间戳（毫秒）

如果JSON中的时间是数字型或字符串型的毫秒级时间戳，可以直接传递给Date构造函数。

// JSON数据示例
const jsonData = {
  event: "产品发布会",
  timeMs: 1678886400000, // 毫秒时间戳
  timeMsStr: "1678886400000" // 字符串毫秒时间戳
};
// 转换为Date对象
const date1 = new Date(jsonData.timeMs);
const date2 = new Date(jsonData.timeMsStr);
console.log(date1); // Tue Mar 15 2023 20:00:00 GMT+0800 (中国标准时间)
console.log(date2); // Tue Mar 15 2023 20:00:00 GMT+0800 (中国标准时间)

b. 处理时间戳（秒）

如果时间戳是秒级的,需要乘以1000转换为毫秒。

const jsonDataSec = {
  event: "新年倒计时",
  timeSec: 1678886400 // 秒级时间戳
};
const dateSec = new Date(jsonDataSec.timeSec * 1000);
console.log(dateSec); // Tue Mar 15 2023 20:00:00 GMT+0800 (中国标准时间)

c. 处理ISO 8601格式字符串

ISO 8601格式的字符串可以直接被Date构造函数解析,它会自动处理时区信息。

const jsonDataIso = {
  event: "线上会议",
  timeIso: "2023-03-15T12:00:00Z", // UTC时间
  timeIsoWithTz: "2023-03-15T20:00:00+08:00" // 东八区时间
};
const dateIso1 = new Date(jsonDataIso.timeIso);
const dateIso2 = new Date(jsonDataIso.timeIsoWithTz);
console.log(dateIso1); // Tue Mar 15 2023 20:00:00 GMT+0800 (中国标准时间) (Z转换为本地时区)
console.log(dateIso2); // Tue Mar 15 2023 20:00:00 GMT+0800 (中国标准时间)

d. 处理自定义格式字符串

对于自定义格式的字符串，Date构造函数可能无法直接正确解析，这时，我们需要先将其拆解，然后使用Date对象的setFullYear, setMonth, getDate, setHours等方法来构建日期对象，或者使用第三方库（如moment.js, date-fns等，但moment.js已不推荐新项目使用）。

// 示例：解析 "2023/03/15 12:00:00"
const jsonDataCustom = {
  event: "项目截止",
  timeCustom: "2023/03/15 12:00:00"
};
const [datePart, timePart] = jsonDataCustom.timeCustom.split(' ');
const [year, month, day] = datePart.split('/');
const [hour, minute, second] = timePart.split(':');
const dateCustom = new Date();
dateCustom.setFullYear(parseInt(year), parseInt(month) - 1, parseInt(day)); // 月份从0开始
dateCustom.setHours(parseInt(hour), parseInt(minute), parseInt(second));
console.log(dateCustom); // Wed Mar 15 2023 12:00:00 GMT+0800 (中国标准时间)

注意：手动解析自定义格式容易出错，且难以应对各种复杂情况，如果可能，建议后端统一使用ISO 8601格式或时间戳。

将Date对象格式化为期望的字符串形式

得到Date对象后,我们通常需要将其格式化为更易读或符合业务需求的字符串。

a. 使用Date对象的内置方法

JavaScript的Date对象提供了一些方法来获取日期和时间的各个部分。

const date = new Date(); // 假设当前是 2023年3月15日 20:30:45
// 获取各部分
const year = date.getFullYear(); // 2023
const month = date.getMonth() + 1; // 3 (0-11, 所以要+1)
const day = date.getDate(); // 15
const hours = date.getHours(); // 20
const minutes = date.getMinutes(); // 30
const seconds = date.getSeconds(); // 45
const dayOfWeek = date.getDay(); // 2 (星期几, 0是周日)
// 手动拼接格式
const formattedDate1 = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
const formattedTime1 = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
console.log(formattedDate1); // 2023-03-15
console.log(formattedTime1); // 20:30:45
// 更简洁的拼接
const formattedDateTime = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
console.log(formattedDateTime); // 2023-03-15 20:30:45

padStart(2, '0')用于确保月份、日期、小时、分钟和秒都是两位数显示。

b. 使用toLocaleString()及其变体

toLocaleString()方法可以根据运行环境的默认设置将日期转换为字符串,我们也可以指定选项来定制输出格式。

const date = new Date('2023-03-15T12:00:00Z');
// 本地日期时间字符串
console.log(date.toLocaleString()); // 可能输出 "2023/3/15 20:00:00" (取决于浏览器和系统环境)
// 本地日期字符串
console.log(date.toLocaleDateString()); // 可能输出 "2023年3月15日"
// 本地时间字符串
console.log(date.toLocaleTimeString()); // 可能输出 "20:00:00"
// 指定语言和国家/地区，以及选项
const formattedOptions = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false // 使用24小时制
};
console.log(date.toLocaleString('zh-CN', formattedOptions)); // 2023/03/15 20:00:00
console.log(date.toLocaleString('en-US', formattedOptions)); // 03/15/2023, 20:00