JS开发日历时currentDate的innerText未渲染日期值的问题求助

DevOps 小满

2026-8-2

问题：日历组件头部无法渲染实际年月，显示原始模板字符串

你开发网站日历组件时，希望在头部显示当前月份和年份，但页面没有渲染出实际日期（如February 2023），而是直接显示字符串${months[currMonth]} ${currYear}。

网站中显示文本而非年月

问题原因

JavaScript中，模板字符串必须使用反引号`包裹，你当前用了单引号'，导致浏览器将${months[currMonth]} ${currYear}当作普通文本输出，不会解析其中的变量。

单引号/双引号仅用于定义普通字符串，无法识别${}格式的变量占位符；只有反引号包裹的模板字符串才支持嵌入变量和表达式。

修正后的代码

修改JS中renderCalendar函数的赋值语句，把单引号换成反引号：

const currentDate = document.querySelector(".current-date");

// 获取当前日期、年份和月份
let date = new Date(),
currYear = date.getFullYear(),
currMonth = date.getMonth();

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 
                'August', 'September', 'October', 'November', 'December'];

const renderCalendar = () => {
    // 将单引号替换为反引号，启用模板字符串解析
    currentDate.innerText = `${months[currMonth]} ${currYear}`;
}

renderCalendar();