Chrome扩展内容脚本中日期格式转换问题求助

问题场景 #

我编写了用于创建表格并插入日期与价格的createTable函数：

function createTable({ data, propertyId }) {
  const table = createElement({
    tag: 'table',
    id: `p-${propertyId}`,
    border: '1',
  });

  const tableHeader = createElement({
    tag: 'caption',
    innerText: 'Table title',
  });

  const tableBody = createElement({
    tag: 'tbody',
  });

  //order dates so that most recent is displayed last
  data
    .sort((prev, current) => {
      const prevDate = prev['date_created'].replace('/', '-').replace('/', '-');
      const currentDate = current['date_created']
        .replace('/', '-')
        .replace('/', '-');
      return new Date(prevDate) - new Date(currentDate);
    })
    .forEach((item) => {
      const row = createElement({
        tag: 'tr',
      });

      const date = createElement({
        tag: 'td',
        innerHTML: item.date_created,
      });

      const price = createElement({
        tag: 'td',
        innerHTML: item.price,
      });

      row.append(date, price);
      tableBody.append(row);
    });

  table.append(tableHeader, tableBody);
  return table;
}

当前日期格式为YYYY/MM/DD，我需要将其转换为DD/MM/YYYY格式。自己编写了日期转换函数，但集成后输出结果为undefined/undefined/22/11/06，无法正确实现转换。我的转换函数如下：

function reformatDate(dateStr) {
  var dArr = dateStr.split('-'); // ex input: "2010-01-18"
  return dArr[2] + '/' + dArr[1] + '/' + dArr[0].substring(2); //ex output: "18/01/10"
}

问题原因 #

你的转换函数使用-作为分割符，但原始日期格式是用/分隔的（比如2022/11/06），调用split('-')后只会得到一个包含完整日期字符串的数组["2022/11/06"]，导致dArr[1]和dArr[2]都是undefined，拼接后就出现了错误的输出结果。

修正方案 #

1. 修复日期转换函数 #

将分割符改为/，并调整拼接逻辑以输出DD/MM/YYYY格式：

function reformatDate(dateStr) {
  // 输入格式: YYYY/MM/DD，例如"2022/11/06"
  const dArr = dateStr.split('/');
  // 输出DD/MM/YYYY格式
  return `${dArr[2]}/${dArr[1]}/${dArr[0]}`;
  // 若需要年份仅保留后两位，可替换为以下代码
  // return `${dArr[2]}/${dArr[1]}/${dArr[0].substring(2)}`;
}

2. 集成到原代码中 #

在forEach循环里调用修正后的转换函数，替换原有的日期赋值逻辑：

// 替换原forEach中的日期创建代码
.forEach((item) => {
  const row = createElement({
    tag: 'tr',
  });

  const reformattedDate = reformatDate(item.date_created);
  const date = createElement({
    tag: 'td',
    innerHTML: reformattedDate,
  });

  const price = createElement({
    tag: 'td',
    innerHTML: item.price,
  });

  row.append(date, price);
  tableBody.append(row);
});

3. 可选：简化排序逻辑的日期处理 #

排序部分的日期转换可以优化，直接通过分割重组生成Date可识别的格式：

.sort((prev, current) => {
  const parseDate = (dateStr) => {
    const [year, month, day] = dateStr.split('/');
    return new Date(`${year}-${month}-${day}`);
  };
  return parseDate(prev.date_created) - parseDate(current.date_created);
})

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