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"
- 示例:
- 数字型时间戳:通常是Unix时间戳,表示自1970年1月1日00:00:00 UTC以来的毫秒数(有时是秒数,需要注意区分)。
-
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


还没有评论,来说两句吧...