如何用JS将ISO8601格式时间字符串转换为浏览器当前时区时间

实现方案 #

方案1：使用JS标准内置Intl.DateTimeFormat（推荐）

JS原生已支持ISO 8601格式字符串的解析，且Intl.DateTimeFormat是官方标准的时间格式化方案，不需要自定义格式规则，适配性更强：

function convertIso8601StringToLocalTime(isoStr, formatType = 'HH:mm') {
  const date = new Date(isoStr);
  // 校验时间合法性，解析失败返回原字符串兜底
  if (isNaN(date.getTime())) return isoStr;
  // 可根据需求扩展formatType对应的格式化配置
  const formatConfig = {
    'HH:mm': { hour: '2-digit', minute: '2-digit', hour12: false },
    'yyyy-MM-dd': { year: 'numeric', month: '2-digit', day: '2-digit' },
    'full': { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }
  }[formatType] || formatConfig['HH:mm'];
  // 不传 locale 参数默认使用浏览器当前语言环境
  return new Intl.DateTimeFormat(undefined, formatConfig).format(date);
}

你只需要把HTML里的data-datetime-format改成对应配置key即可，比如data-datetime-format="HH:mm"就能输出时分格式。

方案2：兼容原%H:%M占位符格式的实现

如果你要保留原来的百分号占位符格式规则，可以用以下自定义解析实现：

function convertIso8601StringToLocalTime(isoStr, format) {
  const date = new Date(isoStr);
  if (isNaN(date.getTime())) return isoStr;
  // 不足两位自动补0的工具方法
  const pad = num => num.toString().padStart(2, '0');
  // 可按需补充更多占位符映射
  const replacements = {
    '%Y': date.getFullYear(),
    '%m': pad(date.getMonth() + 1),
    '%d': pad(date.getDate()),
    '%H': pad(date.getHours()),
    '%M': pad(date.getMinutes()),
    '%S': pad(date.getSeconds())
  };
  return format.replace(/%[YmdHMS]/g, match => replacements[match] || match);
}

无jQuery版本的页面初始化逻辑

如果你不想依赖jQuery，可以直接用原生API遍历元素：

document.querySelectorAll('.convertable-time').forEach(el => {
  const isoStr = el.dataset.iso8601;
  const format = el.dataset.datetimeFormat;
  el.textContent = convertIso8601StringToLocalTime(isoStr, format);
});

内容的提问来源于stack exchange，提问作者Max Williams