如何在JavaScript事件监听器中将Unix时间戳转为localDateString

你需要在changeProducts函数里遍历商品数据，对每个商品完成价格减半、时间戳转本地日期字符串这两个操作，以下是具体实现思路和代码示例：

核心操作拆解 #

• 价格减半：直接对商品的price属性执行除法运算，如需保留小数位数可使用toFixed()方法。
• 时间戳转换：JavaScript的Date构造函数接收毫秒级时间戳，若你的product.date是秒级时间戳，需先乘以1000；之后调用toLocaleDateString()方法生成本地格式的日期字符串。

完整示例代码 #

假设你的商品数据存储在数组中，页面基于该数组渲染，代码如下：

// 示例商品数据
let products = [
  { id: 1, name: "商品1", price: 199, date: 1717209600 }, // 秒级Unix时间戳
  { id: 2, name: "商品2", price: 399, date: 1717296000 },
  { id: 3, name: "商品3", price: 599, date: 1717382400 },
  { id: 4, name: "商品4", price: 799, date: 1717468800 },
  { id: 5, name: "商品5", price: 999, date: 1717555200 }
];

function changeProducts() {
  // 遍历处理每个商品
  products.forEach(product => {
    // 价格减半，保留两位小数
    product.price = (product.price / 2).toFixed(2);
    
    // 转换Unix时间戳为本地日期字符串
    // 若时间戳是毫秒级，去掉*1000即可
    const timestamp = product.date * 1000;
    const localDate = new Date(timestamp).toLocaleDateString();
    // 替换原date属性为转换后的字符串
    product.date = localDate;
  });

  // 重新渲染页面，更新DOM显示
  renderProducts();
}

// 页面渲染函数：根据商品数据更新页面内容
function renderProducts() {
  const container = document.getElementById('product-list');
  container.innerHTML = products.map(item => `
    <div class="product-item">
      <h4>${item.name}</h4>
      <p>价格：¥${item.price}</p>
      <p>日期：${item.date}</p>
    </div>
  `).join('');
}

注意事项 #

• 确认时间戳类型：如果你的product.date本身是毫秒级时间戳，直接使用new Date(product.date)即可，无需乘以1000。
• 自定义日期格式：若需要特定格式（如YYYY-MM-DD），可给toLocaleDateString()传入配置参数：

  product.date = new Date(timestamp).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-');
  

• 数据修改后必须重新渲染页面，否则页面不会显示更新后的内容。

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