如何根据日期字符串提取本地时间 解决JS Date解析时区偏差问题

在React Native应用中需要展示API返回的日期数据，API返回的日期值为："2022-06-20T14:00:00.000"，需要最终向用户展示的格式为2:00 PM。

使用如下代码处理时出现异常：

const dateString = "2022-06-20T14:00:00.000"
const date = new Date(dateString);
console.log(date)

打印出的日期被自动转换为了2022-06-20T14:00:00.000Z，JS将该时间识别为UTC时间下午2点，但实际该字符串代表的是本地时间下午2点，最终格式化后的显示时间不符合预期。

根据ECMAScript标准，new Date()解析不带时区后缀的ISO 8601格式日期字符串时，会默认将其识别为UTC时间，自动追加Z（UTC时区标识），这就是时间解析偏移的根本原因。

你可以根据业务场景选择以下两种方案：

• 方案1：解析前手动追加本地时区标识，让JS按本地时区解析时间

const dateString = "2022-06-20T14:00:00.000";
// 拼接本地时区后缀后再实例化Date
const date = new Date(`${dateString}${getLocalTimezoneSuffix()}`);

// 工具函数：获取当前环境的本地时区后缀，例如东八区返回"+08:00"
function getLocalTimezoneSuffix() {
  const offset = new Date().getTimezoneOffset();
  const sign = offset > 0 ? '-' : '+';
  const absOffset = Math.abs(offset);
  const hours = String(Math.floor(absOffset / 60)).padStart(2, '0');
  const mins = String(absOffset % 60).padStart(2, '0');
  return `${sign}${hours}:${mins}`;
}

// 后续按需求格式化date即可得到2:00 PM的结果

• 方案2：如果不需要做日期运算，仅需要展示时间，可以直接拆分字符串格式化，完全绕过时区解析逻辑

const dateString = "2022-06-20T14:00:00.000";
const timeSection = dateString.split('T')[1];
const [hour, minute] = timeSection.split(':');
const period = Number(hour) >= 12 ? 'PM' : 'AM';
const displayHour = Number(hour) % 12 || 12;
const displayText = `${displayHour}:${minute} ${period}`;
// displayText 即为 2:00 PM

内容的提问来源于stack exchange，提问作者Joshua Augustinus