踩坑：JSP中使用ES6、JavaScript的模板字符串

原创已于 2023-05-29 20:44:53 修改 · 875 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #开发语言

于 2023-05-22 22:06:29 首次发布

BUG\踩坑专栏收录该内容

8 篇文章

订阅专栏

博客讲述了在JSP里书写JavaScript代码时，使用ES6模板字符串处理数据渲染为空的问题。原因是模板字符串中的内容被JSP的EL表达式解析，解决办法是用引号将其括起来，让最外层被EL处理，引号内的作为字符串拼接后由JS解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JSP中书写JavaScript代码时，我想用ES6的模板字符串快速的处理接收到的数据。
当时的代码如下：

$('#btn')[0].addEventListener('click', function () {  
	$.get('/student/getCourse', function (data) {  
		content = data.map((item,idx) => {  
			return `<tr><td>${item.courseName}</td><td>${item.courseScore}</td></tr>`  
		}).join('')  
		$('tbody').html(content)
	})  
})

然后渲染不出来，${item.courseName}的值为空。

突然想起来JSP的EL表达式，恍然大悟，原来模板字符串中的${}被当做EL表达式来解析了，所以为空。

解决：使用引号将${}括起来
在JSP中使用ES6的模板字符串需要用引号括起来，像这样：

`<tr><td>${"${item}"}</td></tr>`

// 或

`<tr><td>${'${item}'}</td></tr>`

最外层的${}被当做EL表达式处理，而引号括起来的${}会被当做字符串拼接回模板字符串中，然后交给JS去解析