JavaScript中Date对象输出为[object Object] 如何转换为字符串

问题原因 #

• 你赋值给id的是items[0]，这是一个包含userTodoInput和currentTime两个属性的对象，直接和字符串拼接时会自动调用toString()方法，输出就是[object Object]
• 你把currentTime定义在全局作用域，所有新增的待办都会共用同一个初始化时间，不会随新增操作更新
• 循环逻辑错误：每次新增待办都会遍历整个items数组重复渲染所有历史待办，而且循环内固定取items[0]而非当前遍历的items[i]
• 重复ID问题：动态生成的p标签都用了同一个t-listID，不符合HTML规范

修复方案 #

日期转字符串方法 #

你可以直接调用Date对象的内置方法转成可阅读的字符串，常用方法如下：

• toString()：转成本地时区的完整日期时间字符串，示例：Wed Sep 18 2024 14:30:00 GMT+0800 (中国标准时间)
• toLocaleString()：转成本地化的日期时间格式，示例：2024/9/18 14:30:00
• toLocaleDateString()：仅输出本地化日期，示例：2024/9/18
• toLocaleTimeString()：仅输出本地化时间，示例：14:30:00

完整修复后的代码（含逻辑优化） #

var completelist = document.getElementById("thelist");
var items= [];

todoButton.onclick = function addelement() {
  var userTodoInput = document.getElementById("todoInput"); 
  // 每次新增待办时再获取当前时间，保证时间准确
  var currentTime = new Date();
  let node = document.createElement("LI");
  node.innerHTML = userTodoInput.value;
  completelist.appendChild(node);
  // 存储输入框的值而非DOM对象，避免后续引用异常
  items.push({
    todoContent: userTodoInput.value,
    createTime: currentTime
  });
  // 清空之前的渲染内容，避免重复渲染
  document.getElementById("mydiv").innerHTML = '';
  // 遍历所有待办渲染
  for (var i = 0, len = items.length; i < len; i++) {
    var currentTodo = items[i];
    // 调用toLocaleString转成可读日期字符串
    var timeStr = currentTodo.createTime.toLocaleString();
    document.getElementById("mydiv").innerHTML += "<div class='todo' style='max-width:300px; margin:0 auto;' ><p> You have added this to the list of actions: " + currentTodo.todoContent + " . The date of the to-do creation is : "+ timeStr +"</p></br></div>";
  }
  // 清空输入框，提升使用体验
  userTodoInput.value = '';
}

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