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

在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去解析

posted @ 2023-05-22 22:06  秋天Code  阅读(160)  评论(0)    收藏  举报  来源